Ho bisogno di mostrare una mappa con più marcatori, Ive ha trovato this question che ha quello che sto cercando, ma il problema è che ho bisogno di mostrare il marcatore di ogni oggetto accanto ad esso.Come mostrare elementi su google map in modo simile a come google mostra i risultati
<c:forEach var="product" items="products">
${product.name}
</c:forEach>
Inoltre ho controllato la risposta di this question, ma non ha aiutato molto.
Google Map Codice
var pinColor = "FE7569";
var marker, i;
var address=[];
address[0] = "New york";
address[1] = "las vegas";
address[2] = "san francisco";
address[3] = "chicago";
// Set default map center location
var latlng = new google.maps.LatLng(latcenter,longcenter);
// Create pinShadow for each marker
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com /chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
// Function to create the dynamic marker
function pinImage(i){
return image = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));
}
// Function to run once page has loaded
function initialize(){
var geocoder=new google.maps.Geocoder();
// Set Default settigns for google map
var settings = {
zoom: 3,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
// Start Google Maps and assign it to div on site
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
// loop though total numner of address in array
for (var i = 0; i < address.length; i++) {
(function(i) {
// Use geocoder to grab latlong for user inputed address
geocoder.geocode({ 'address': address[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Redefine map center location
if (i == 1){ map.setCenter(results[0].geometry.location); }
// Create dynamic markers on map as per the address array
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title:address[i],
zIndex: i,
// PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??
icon: pinImage(i),
shadow: pinShadow
});
}
});
})(i);
}
}
google.maps.event.addDomListener(window, 'load', initialize)
uscita desiderabile è simile al seguente immagine, ogni risultato è un indicatore di nome e la sua posizione è indicata dal suo marcatore associato sulla mappa. Ho bisogno di marcatori per essere alfabetico non numerati anche in base a coordinate non indirizzo.
Quale parte non funziona? La parte JSP o Javascript? – Jeroen
@Jeroen Non so come aggiungere il marcatore accanto al nome di ciascun prodotto –