複数のマーカーで問題が発生しました（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

しかし、異なるアドレスが入力されている場合、マーカーが複製される理由を特定することができませんでした。複数のマーカーを作成する場合は、こちらのdemoをご覧ください。

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

}