Проблема с несколькими маркерами (Google Maps API v3)

Question

Я использую Google Maps API v3 и пытаюсь разместить на карте несколько маркеров.

Это мой код:

var map;
var geocoder;
var bulleInfo = null;
var marker = null;
var siteLatLng;
var globalAddress;
var globalLocation;
var globalFirstName;
var globalLastName;


function initialize()
{
    var centerMap = new google.maps.LatLng(48, 1);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    geocoder = new google.maps.Geocoder();

    bulleInfo = new google.maps.InfoWindow({
                    content: "loading..."

            });
}


function codeAddress(profiles)
{
    for(i=0; i < profiles.length; i++) {
        globalLocation = profiles[i].location;
        globalFirstName = profiles[i].first_name;
        globalLastName = profiles[i].last_name;

        geocoder.geocode({'address': globalLocation}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              globalAddress = results[0].geometry.location;
              putMarkers();
          }

          else {
                alert("Geocode was not successful for the following reason: " + status);
          }
        });
    }

}

function putMarkers()
{
    marker = new google.maps.Marker({
        map: map,
        position: globalAddress,
        zIndex: i,
        html: globalFirstName
    });

    google.maps.event.addListener(marker, 'click', function() {
        bulleInfo.setContent(this.html);
        bulleInfo.open(map, this);
    });

}

Проблема в том, что все маркерыодинаковы (равны последнему элементу профилей)!

Что не так?

Спасибо!

Answer 1

Я посмотрел ваш код, однако не смог точно определить, почему маркеры реплицируются, если предоставляются разные адреса. Пожалуйста, посмотрите демо здесь для создания нескольких маркеров, надеюсь, они помогут.

Javascript для инициализации карты и создания маркеров показан ниже.

var map, markersArray, infowindow;

function initialize() {
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng(51.5001524, -0.1262362),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

    infowindow = new google.maps.InfoWindow({
        size: new google.maps.Size(150, 50)
    });

    google.maps.event.addListener(map, 'click', function () {
        infowindow.close();
    });

    markersArray = [];
}

function createMarker(latlng, html, zoom) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });
    marker.MyZoom = zoom;
    return marker;
}


function addMarker() {

    var lat = parseFloat(document.getElementById('lat').value);
    var lng = parseFloat(document.getElementById('lng').value);
    if (!isNaN(lat) && !isNaN(lng)) {
        point = new google.maps.LatLng(lat, lng);
        map.setCenter(point);
        zoom = 14;
        alert(point);
        marker = createMarker(point, "<h3>Marker" + (markersArray.length + 1) + " " + point + "</h3>", zoom);

        var newLi = document.createElement("li");
        var newA = document.createElement("a");
        var newText = document.createTextNode("Marker " + (markersArray.length + 1));
        newA.appendChild(newText);
        newLi.appendChild(newA);
        newA.setAttribute('onclick', 'displayMarker(this.innerHTML);');
        document.getElementById('marker_tabs').appendChild(newLi);
        markersArray.push(marker);

    } else {
        alert("Kindly Enter Co-ordinates" + lat + " " + lng);
    }

}

function displayMarker(text) {

    marker_id = parseInt(text.split(" ")[1]) - 1;
    marker = markersArray[marker_id];
    map.setCenter(marker.position);
    infowindow.setContent("<h3>Markers " + (marker_id + 1) + " " + marker.position + "</h3>");
    infowindow.open(map, marker);
}

function getMarker() {
    var address = $('#address').val();
    address = address.replace(/ /g, "+");

    $.getJSON("getjson.php?address=" + address,

    function (data) {
        lat = data.results[0].geometry.location.lat;
        lng = data.results[0].geometry.location.lng;
        point = new google.maps.LatLng(lat, lng);
        map.setCenter(point);
        zoom = 14;
        marker = createMarker(point, "<h3>Marker" + (markersArray.length + 1) + " " + point + "</h3>", zoom);

        var newLi = document.createElement("li");
        var newA = document.createElement("a");
        var newText = document.createTextNode("Marker " + (markersArray.length + 1));
        newA.appendChild(newText);
        newLi.appendChild(newA);
        newA.setAttribute('onclick', 'displayMarker(this.innerHTML);');
        document.getElementById('marker_tabs').appendChild(newLi);
        markersArray.push(marker);
    });

}