Question

66

Mapping multiple locations with Google Maps JavaScript API v3 and Geocoding API

rated 0 times [ 69] [ 3] / answers: 1 / hits: 61773 / 9 Years ago, sun, april 5, 2015, 12:00:00

I'm using Google Maps JavaScript API v3 to generate a map with multiple locations/markers. I only have the address for these locations, not the coordinates, so I'm using the Geocoding API to get the coordinates.

I finally got Google's geocoding to work, so the location markers are showing up where they are supposed to be. However, the same content is showing up in every InfoWindow. I seem to be unable to pass the location arrays into the geocode function. (Incidentally, I also tried creating a variable for the geocode results and moving the infoWindow function outside of the geocode function, but I couldn't make that work either.)

I've tried this a hundred different ways already. I hoping someone else will see what I haven't been able to see.

    var locations = [

        ['Location 1 Name', 'Location 1 Address', 'Location 1 URL'],

        ['Location 2 Name', 'Location 2 Address', 'Location 2 URL'],

        ['Location 3 Name', 'Location 3 Address', 'Location 3 URL']

    ];



    geocoder = new google.maps.Geocoder();



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



        title = locations[i][0];

        address = locations[i][1];

        url = locations[i][2];



        geocoder.geocode({ 'address' : locations[i][1] }, function(results, status) {

          marker = new google.maps.Marker({

              icon: 'marker_blue.png',

              map: map,

              position: results[0].geometry.location,

              title: title,

              animation: google.maps.Animation.DROP,

              address: address,

              url: url

          })

          infoWindow(marker, map, title, address, url);

        })



    }



    function infoWindow(marker, map, title, address, url) {

        google.maps.event.addListener(marker, 'click', function() {

            var html = <div><h3> + title + </h3><p> + address + <br></div><a href=' + url + '>View location</a></p></div>;

            iw = new google.maps.InfoWindow({ content : html, maxWidth : 350});

            iw.open(map,marker);

        });

    }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stephonkeandrer

Add To Favorites

Follow

Total Points: 392

Total Questions: 94

Total Answers: 100

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

stephonkeandrer questions

1 Electron: how to open an url in the same window and after the user do some action go back to application in the same window

Thu, Mar 24, 22, 00:00, 2 Years ago

1 How to disable scroll on body when fullscreen menu open

Sun, Jun 28, 20, 00:00, 4 Years ago

1 How databind a textarea component text value and update it?

Tue, Jun 9, 20, 00:00, 4 Years ago

1 Angular; how to re-render component data when I update variable in script. Binding data is working, but not updating

Mon, May 4, 20, 00:00, 4 Years ago

1 Loading module was blocked because of a disallowed MIME type (“application/wasm”)

Sun, Oct 13, 19, 00:00, 5 Years ago

View All

answered 9 Years ago emilee · Accepted Answer

This is a duplicate of google map info window multiple addresses via xml, just not an exact duplicate. The geocoder is asynchronous, so when the geocoder callback runs, the value of address is that from the end of the loop for all the calls.

The answer is the same: The simplest solution is to use function closure to associate the call to the geocoder with the returned result:

function geocodeAddress(locations, i) {

    var title = locations[i][0];

    var address = locations[i][1];

    var url = locations[i][2];

    geocoder.geocode({

        'address': locations[i][1]

    },



    function (results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            var marker = new google.maps.Marker({

                icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',

                map: map,

                position: results[0].geometry.location,

                title: title,

                animation: google.maps.Animation.DROP,

                address: address,

                url: url

            })

            infoWindow(marker, map, title, address, url);

            bounds.extend(marker.getPosition());

            map.fitBounds(bounds);

        } else {

            alert(geocode of  + address +  failed: + status);

        }

    });

}

Working fiddle

code snippet:

var locations = [

  ['Location 1 Name', 'New York, NY', 'Location 1 URL'],

  ['Location 2 Name', 'Newark, NJ', 'Location 2 URL'],

  ['Location 3 Name', 'Philadelphia, PA', 'Location 3 URL']

];



var geocoder;

var map;

var bounds = new google.maps.LatLngBounds();



function initialize() {

  map = new google.maps.Map(

    document.getElementById(map_canvas), {

      center: new google.maps.LatLng(37.4419, -122.1419),

      zoom: 13,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    });

  geocoder = new google.maps.Geocoder();



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





    geocodeAddress(locations, i);

  }

}

google.maps.event.addDomListener(window, load, initialize);



function geocodeAddress(locations, i) {

  var title = locations[i][0];

  var address = locations[i][1];

  var url = locations[i][2];

  geocoder.geocode({

      'address': locations[i][1]

    },



    function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {

        var marker = new google.maps.Marker({

          icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',

          map: map,

          position: results[0].geometry.location,

          title: title,

          animation: google.maps.Animation.DROP,

          address: address,

          url: url

        })

        infoWindow(marker, map, title, address, url);

        bounds.extend(marker.getPosition());

        map.fitBounds(bounds);

      } else {

        alert(geocode of  + address +  failed: + status);

      }

    });

}



function infoWindow(marker, map, title, address, url) {

  google.maps.event.addListener(marker, 'click', function() {

    var html = <div><h3> + title + </h3><p> + address + <br></div><a href=' + url + '>View location</a></p></div>;

    iw = new google.maps.InfoWindow({

      content: html,

      maxWidth: 350

    });

    iw.open(map, marker);

  });

}



function createMarker(results) {

  var marker = new google.maps.Marker({

    icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',

    map: map,

    position: results[0].geometry.location,

    title: title,

    animation: google.maps.Animation.DROP,

    address: address,

    url: url

  })

  bounds.extend(marker.getPosition());

  map.fitBounds(bounds);

  infoWindow(marker, map, title, address, url);

  return marker;

}

html,

body,

#map_canvas {

  height: 100%;

  width: 100%;

  margin: 0px;

  padding: 0px

}

<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk></script>

<div id=map_canvas style=border: 2px solid #3872ac;></div>