开发者

How to show 2 markers on a Google Map?

How do I get multiple markers on a Google Map, using Javascript API v3? Below, when my code adds the second marker it's removing the first one.

var locations = {
    "1" : {
        "name": "location1",
        "address": "10000 N Scottsdale Rd",
        "city": "Scottsdale",
        "state": "AZ",
        "zipcode": "85253"                                              
    },
    "2" : {
        "name": "location2",
        "address": "15440 N 71st Street",
        "city": "Scottsdale",
        "state": "AZ",
        "zipcode": "85254"
    }
}               
var geocoder = new google.maps.Geocoder();
for (item in locations) {
    var loc = locations[item].address + ", " + locations[item].city + " " +
        locations[item].state + " " + locations[item].zipcode;
    geocoder.geocode( { 'address': loc}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var options = {
                zoom: 10,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                zoomControl: true
            }
            if (map) {
                new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    title: locations[item].name
                });                                                                     
            } else {
                var map = new google.maps.Map(document.getElementById("map"), options);
                new google.maps.Marker({
                    map: map,
                    position: results[开发者_如何学运维0].geometry.location,
                    title: locations[item].name
                });                                 
            }
            var infowindow = new google.maps.InfoWindow({ content: "test"});
        } else {  // if map lookup fails, display a map of phoenix
            var phoenix = new google.maps.LatLng(33.4483771,-112.07403729999999);
            var options = {
                zoom: 11,
                center: phoenix,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                zoomControl: true
            }
            map = new google.maps.Map(document.getElementById("map"), options);
        }
    });
}


The map variable is only defined in the callback function, (e.g. function(results, status) {...}), so when the second geocoded point comes back, you are still creating a new map (for the second time), since that map is not initialized.

You should declare and initialize the map separately from the marker adding code.


loop through your marker construction from your data set. Each item in your set, create a marker as you normally would. instatiate your map only once and use the variable assigned to this in your marker creation.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜