Problem with multiple markers (Google Maps API v3 )
I am using the Google Maps API v3 and I am trying to put multiple markers on the map.
This is my code:
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_c开发者_如何转开发anvas"), 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);
});
}
The problem is that all the markers are the same (equal to the last element of profiles)!
What is wrong?
Thank you!
I glanced your code however was unable to pinpoint why the markers are getting replicated if different addresses are being supplied. Please see the demo here for creating multiple markers, hope they help.
Javascript for initialising the map and creating markers is show below.
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);
});
}
精彩评论