0

I'm trying to use the script made by user netbrain as found here on stackoverflow to also show the address title when the user clicks on the marker. It should be relatively simple but I'm lost.

Any ideas? I've tried numerous options but nothing seems to work. netbrain's code below:

var map;
var elevator;
var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: 'roadmap'
};

map = new google.maps.Map($('#map_canvas')[0], myOptions);


var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];

for (var x = 0; x < addresses.length; x++) {
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=true', null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
            position: latlng,
            map: map
            title: addresses[0]
        });

    });
}
Community
  • 1
  • 1
osteopathx
  • 79
  • 2
  • 7

2 Answers2

2

This answer assumes you're only after tool tip and not the infowindow.

The variables addresses and x cannot be used within the callback as the value of x will always be 5 (in this example, see length of addresses array). Instead look at the data object like so:

var map;
var elevator;
var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: 'roadmap'
};

map = new google.maps.Map($('#map_canvas')[0], myOptions);


var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];

for (var x = 0; x < addresses.length; x++) {
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=true', null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
            position: latlng,
            map: map
            title: data.results[0].formatted_address
        });

    });
}

EDIT

For completeness the data object is the result of the geocoding API call. The formatted_address is a property of a match within the results, see https://developers.google.com/maps/documentation/geocoding/#GeocodingResponses

Jonathan
  • 5,953
  • 1
  • 26
  • 35
0

Use this code:

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 1,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: 'terrain'
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];

    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            }); 
            google.maps.event.addListener(marker, 'click', function(evt) {
               var info_window = new     google.maps.InfoWindow({maxWidth: 500}); 
                info_window.setContent('Content here');
                info_window.setPosition(latlng);
                info_window.open(map, marker);
            });
        });
    }

});
ShirAzi
  • 44
  • 6