multiple marker with Google Maps API V3 using postcode geocode

Question

I'm currently trying to make a multiple marker google map on my webpage but trying to get the locations of each marker from the postcode. I have found code for the markers and code for the postcode geocode but I cant seem to find a way to stick them together.

The multiple marker code I have :

  <script type="text/javascript">
  var locations = [
  ['Chester', 53.183497, -2.890605, 3, 'https://www.google.co.uk'],
  ['Manchester', 53.474103, -2.243593, 2, 'https://www.google.co.uk'],
  ['Liverpool', 53.421206, -2.945146, 1, 'https://www.google.co.uk/']
  ];


var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 9,
  center: new google.maps.LatLng(53.381021, -2.608138),
  mapTypeId: google.maps.MapTypeId.TERRAIN,

});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    url: locations[i][4],
    map: map
  });

    google.maps.event.addListener(marker, 'dblclick', function() {
            window.location.href = this.url;
        });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
</script>

postcode geocode code I have :

  <html>
  <head>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript"></script>
  </head>
  <body onload="initialize()">
  <div align="center" style="height: 30px; width: 530px">
  <input id="address" type="textbox">
  <input type="button" value="Geocode" onclick="codeAddress()">
  </div>
  <div id="map" style="height:200px; width: 530px"></div>
  </body>
  </html>
  <script>
  var geocoder;
  var map;
  function initialize()
  {
    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById("map"),
  {
    zoom: 8,
    center: new google.maps.LatLng(22.7964,79.5410),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  }

  function codeAddress()
  {
   var address = document.getElementById("address").value;
   geocoder.geocode( { 'address': address}, function(results, status)
   {
    if (status == google.maps.GeocoderStatus.OK)
    {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker(
        {
            map: map,
            position: results[0].geometry.location
        });
    }
    else
    {
        alert("Geocode was not successful for the following reason: " + status);
    }
  });
   }
   </script>

Your code already has the location coordinates, why do you think you need the geocoder? What are the postcodes you are trying to geocode? (**Note**: the geocoder is subject to a quota and rate limit, it will only work for ~10 locations before you need to deal with that). — geocodezip, Oct 14 '15 at 10:41
I know the code already has the coordinates but it will be easier to add more on if it's just a postcode then if i have to find the longitude and latitude. the post code aren't on this code but any postcode will do. lets say M3 3JU, CH1 2DY and L3 8EN — Stephen, Oct 14 '15 at 11:24
Might be easier to add more, but you can only add up to about 10 locations that way (because it uses more of Google's resources). — geocodezip, Oct 14 '15 at 13:37

score 0 · Answer 1 · answered Oct 14 '15 at 11:32

The following example shows how to utilize google.maps.Geocoder to display detailed address information including postal code:

function initMap() {

    var geocoder = new google.maps.Geocoder();

    var locations = [
        ['Chester', 53.183497, -2.890605, 3, 'https://www.google.co.uk'],
        ['Manchester', 53.474103, -2.243593, 2, 'https://www.google.co.uk'],
        ['Liverpool', 53.421206, -2.945146, 1, 'https://www.google.co.uk/']
    ];


    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 9,
        center: new google.maps.LatLng(53.381021, -2.608138),
        mapTypeId: google.maps.MapTypeId.TERRAIN,

    });

    var infowindow = new google.maps.InfoWindow();


    for (var i = 0; i < locations.length; i++) {
        var latLng = { lat: locations[i][1], lng: locations[i][2] };
        resolveAddressByLatLng(geocoder, latLng, (function(loc) {

                return function(result) {
                    //console.log(location);

                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(loc[1], loc[2]),
                        url: loc[4],
                        map: map
                    });


                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.setContent(result[0].formatted_address);
                        infowindow.open(map, marker);
                    });

                }

            })(locations[i]),
            function(status) {
                console.log("Geocode was not successful for the following reason: " + status);
            });


    }
}


function resolveAddressByLatLng(geocoder, latLng,success,error) {
    geocoder.geocode({ 'location': latLng }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            success(results);
        } else {
            error(status);
        }
    });
}

     html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }

 <div id="map"></div>
 <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"
              async defer></script>

score 0 · Answer 2 · answered Oct 14 '15 at 13:11

To add the markers via postcode, you need to replace the latitude/longitude coordinates in the array with the postcode, then geocode that.

// updated array
var locations = [
    ['Manchester', 'M3 3JU', 'https://www.google.co.uk'],
    ['Chester', 'CH1 2DY', 'https://www.google.co.uk'],
    ['Liverpool', 'L3 8EN', 'https://www.google.co.uk/']
];
// geocoding function
function codeAddress(location) {
    geocoder.geocode({
        'address': location[1]
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                title: location[1],
                url: locations[2],
                position: results[0].geometry.location
            });
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);

            google.maps.event.addListener(marker, 'dblclick', function () {
                window.location.href = this.url;
            });

            google.maps.event.addListener(marker, 'click', (function (marker, location) {
                return function () {
                    infowindow.setContent(location[0]);
                    infowindow.open(map, marker);
                };
            })(marker, location));
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

proof of concept fiddle

code snippet:

var locations = [
  ['Manchester', 'M3 3JU', 'https://www.google.co.uk'],
  ['Chester', 'CH1 2DY', 'https://www.google.co.uk'],
  ['Liverpool', 'L3 8EN', 'https://www.google.co.uk/']
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 9,
  center: new google.maps.LatLng(53.381021, -2.608138),
  mapTypeId: google.maps.MapTypeId.TERRAIN

});

var infowindow = new google.maps.InfoWindow();
var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
var marker, i;

for (i = 0; i < locations.length; i++) {
  codeAddress(locations[i]);
}

function codeAddress(location) {
  geocoder.geocode({
    'address': location[1]
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        title: location[1],
        url: locations[2],
        position: results[0].geometry.location
      });
      bounds.extend(marker.getPosition());
      map.fitBounds(bounds);

      google.maps.event.addListener(marker, 'dblclick', function() {
        window.location.href = this.url;
      });

      google.maps.event.addListener(marker, 'click', (function(marker, location) {
        return function() {
          infowindow.setContent(location[0]);
          infowindow.open(map, marker);
        };
      })(marker, location));



    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

multiple marker with Google Maps API V3 using postcode geocode

2 Answers2