CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
osteopathx
osteopathx

Reputation: 79

Google API multiple markers (addresses NOT latlong) displaying title (tool tip)

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]
        });

    });
}

Upvotes: 0

Views: 344

Answers (2)

Jonathan
Jonathan

Reputation: 5993

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

Upvotes: 2

ShirAzi
ShirAzi

Reputation: 44

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);
            });
        });
    }

});

Upvotes: 0

Related Questions