Google Map - Geocoding

Pin markers on the map for specified addresses.

by Brian von Konsky

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Business Web Technology (ISYS3004) -->
<!-- School of Information Systems      -->
<!-- Curtin University                  -->

<!-- See jsfiddle External Resources for google map api reference -->
<!-- to https://maps.googleapis.com/maps/api/js                   -->
<h2> Address Lookup </h2>
<p>
    <label>address: </label>
    <input id="address" type="text" value="type address here" />
    <button onclick="codeAddress()">Search</button>
</p>
<button onclick="reset()">Reset</button>
<div id="google_map"></div>

CSS

#google_map {
    width: 512px;
    height: 512px;
    background-color: black;
}

JavaScript

// Try these addresses
// 1.  Your own address if you live in the Perth area
// 2.  Curtin Univeristy, Bentley
// 3.  Kings Park, Perth
// 4.  City Beach, Perth
// 4.  Perth Airport
// 5.  Dome Coffee, Fremantle
// 6.  Blue Duck, Cottesloe
// 7.  Port Louis, Mauritius (Explain what you see, or don't see! What's needed in the code?)
//
// Questions:
// a. Why does "Kings Park" come up with two markers?
// b. Why is there match for "Dome, Coffee, Fremantle", but not "Dome Coffee"?
// 
// Click on the marker to see the address.

var geocoder;
var map;
var markers = [ ];
var infowindow;


// Inialise the map centered on cooordinates for Curtin University, Bentley
function initMap() {
    
    // Create an instance of a Geocoder object
    geocoder = new google.maps.Geocoder();
   
    // Create a LatLng object centered at Curtin
    var curtin= new google.maps.LatLng(-32.003850, 115.894818);
    
    // Specify basic set of map options
    var mapOptions = {
      zoom: 11,
      center: curtin
      }
    
    // Create the new Map object
    map = new google.maps.Map(document.getElementById("google_map"), mapOptions);
    
    infowindow = new google.maps.InfoWindow({});
}

// Geocode a new address
function codeAddress() {
    
    // Get the address to be pinned from the form
    var address = document.getElementById("address").value;
    
    // Sepcify the callback to be invoked after Google 
    // returns the list of matching addresses
    geocoder.geocode( { 'address': address}, function(results, status) {
        
        // If the status is okay proceed
        if (status == google.maps.GeocoderStatus.OK) {
          
          // There may be more than one matching location, so show them all
          for (var i=0 ; i<results.length; i++) {
              
              // Get the postion
              var latlng = results[i].geometry.location;
              
              // Draw a marker
              var marker = new google.maps.Marker({
                ...