Add multiple UK Postcodes list to Google Maps

Question

I've tried loads of combinations and read through loads of articles on Stackoverflow but can't seem to get this to work.. Should be real easy but proving to be a right pain in the backside so just wondering if anyone can help..

simply trying to add some markers to a google map (& eventually directions) I have below code but all I get is blank screen.. If I strip out the markers code I do get the bare map so it is working in the page at least... can anyone help..?

<script type="text/javascript">
//<![CDATA[

                var geocoder;
                var map;
                function initialize() {
                  geocoder = new google.maps.Geocoder();
                  var mapOptions = {
                    zoom: 7
                  }
                  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                  codeAddress();
                }

                function codeAddress() {
                  var address = ['SO21 3NE','Horsham'];
                  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);
                    }
                  });
                }

                google.maps.event.addDomListener(window, 'load', initialize);//]]>
 </script>

this fixed it...

 var locations = ['SO21 3NE','Horsham','RG45 7EG'];
                var infowindow = new google.maps.InfoWindow();
                var marker, i;
                var geocoder = new google.maps.Geocoder();
                var mapOptions = {
                    zoom: 7
                  }
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                for (i = 0; i < locations.length; i++) {

                geocoder.geocode( { 'address': locations[i]}, function(results, status) {
                    //alert(status);
                    if (status == google.maps.GeocoderStatus.OK) {

                        //alert(results[0].geometry.location);
                        map.setCenter(results[0].geometry.location);
                        marker = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map
                        }); 

                        google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map, marker);});
                        google.maps.event.addListener(marker, 'mouseout', function() { infowindow.close();});

                    }
                    else
                    {
                        alert("some problem in geocode" + status);
        }
    }); 
}
                 google.maps.event.addDomListener(window, 'load', initialize);

geocoder expects a string for address if I'm not mistaken. What errors are thrown in browser console? — charlietfl, Dec 23 '14 at 18:58

score 0 · Answer 1 · edited May 23 '17 at 12:05

I get a javascript error with your code: Uncaught InvalidValueError: in property address: not a string

Your address property of the GeocoderRequest is an array not a string.

function codeAddress() {
  var address = ['SO21 3NE','Horsham'];
  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);
    }
  });
}

should be:

function codeAddress() {
  var address = 'SO21 3NE, Horsham';
  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);
    }
  });
}

working fiddle

example with 25 addresses from this question

Thanks,, I should have explained better but the two entries in var address should be separate markers. There will be more as well.. So I need an array.. — user552769, Dec 23 '14 at 19:18
Last I checked "Horsham" is not a postal code. If your input is an array, you need code to process that array, send it in individual geocoder requests, handling the OVER_QUERY_LIMIT and other errors. There are lots of duplicates of that question on SO. — geocodezip, Dec 23 '14 at 19:32

Add multiple UK Postcodes list to Google Maps

1 Answers1