La cartographie de multiples endroits avec Google Maps JavaScript API v3 et de l'API de Géocodage

Je suis en utilisant Google Maps JavaScript API v3 pour générer une carte avec plusieurs sites/marqueurs. Je n'ai que l'adresse de ces endroits, et non pas les coordonnées, je suis donc en utilisant l'API de Géocodage pour obtenir les coordonnées.

J'ai finalement obtenu de Google geocoding de travail, de sorte que l'emplacement des marqueurs montrent jusqu'où ils sont censés être. Cependant, la même contenu est à montrer dans toutes les InfoWindow. Il me semble être incapable de passer à l'emplacement des baies dans la fonction de géocodage. (Soit dit en passant, j'ai aussi essayé de créer une variable pour le géocodage résultats et le déplacement de l'infoWindow fonction à l'extérieur de la fonction de géocodage, mais je ne pouvais pas faire ce travail soit.)

J'ai essayé une centaine de façons différentes déjà. J'espère que quelqu'un d'autre voir ce que je n'ai pas pu voir.

    var locations = [
['Location 1 Name', 'Location 1 Address', 'Location 1 URL'],
['Location 2 Name', 'Location 2 Address', 'Location 2 URL'],
['Location 3 Name', 'Location 3 Address', 'Location 3 URL']
];
geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
title = locations[i][0];
address = locations[i][1];
url = locations[i][2];
geocoder.geocode({ 'address' : locations[i][1] }, function(results, status) {
marker = new google.maps.Marker({
icon: 'marker_blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map, title, address, url);
})
}
function infoWindow(marker, map, title, address, url) {
google.maps.event.addListener(marker, 'click', function() {
var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
iw = new google.maps.InfoWindow({ content : html, maxWidth : 350});
iw.open(map,marker);
});
}

InformationsquelleAutor lacoder | 2015-04-05

C'est un doublon de google map info fenêtre plusieurs adresses via xml, tout simplement pas une copie exacte. Le geocoder est asynchrone, donc quand le geocoder de rappel fonctionne, la valeur de l'adresse est qu'à partir de la fin de la boucle pour tous les appels.

La réponse est la même: la solution La plus simple est d'utiliser la fonction de fermeture à associer l'appel à la geocoder avec le résultat renvoyé:

function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
var url = locations[i][2];
geocoder.geocode({
'address': locations[i][1]
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map, title, address, url);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}

Travail de violon

extrait de code:

JS:

var locations = [
['Location 1 Name', 'New York, NY', 'Location 1 URL'],
['Location 2 Name', 'Newark, NJ', 'Location 2 URL'],
['Location 3 Name', 'Philadelphia, PA', 'Location 3 URL']
];
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
geocodeAddress(locations, i);
}
}
google.maps.event.addDomListener(window, "load", initialize);
function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
var url = locations[i][2];
geocoder.geocode({
'address': locations[i][1]
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map, title, address, url);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}
function infoWindow(marker, map, title, address, url) {
google.maps.event.addListener(marker, 'click', function() {
var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
iw = new google.maps.InfoWindow({
content: html,
maxWidth: 350
});
iw.open(map, marker);
});
}
function createMarker(results) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
infoWindow(marker, map, title, address, url);
return marker;
}

CSS:

html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}

HTML:

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

InformationsquelleAutor geocodezip

Étape 1

Vous devez d'abord créer l'emplacement de carte pour que, comme, où voulez-vous pour ajouter cette carte à votre application web. Donc tout d'abord créer JSP/HTML/page ASP dans lequel vous devrez créer emplacement où vous souhaitez afficher la carte.

<div id="map_canvas" style="width: 1350px; height: 500px"></div>

Étape 2

Ci-dessous j'écris le script à l'aide de laquelle vous pouvez voir la carte sur votre application web.

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=TRUEORFALSE"></script>
<script type="text/javascript">
var map;
var markers;
function initialize() {
$
.ajax({
type : "POST",
url : "Your Servlet Name", //Servlet Name
data : $("#FormID"),
success : function(responseJson) {
var result = $.parseJSON(responseJson);
markers = result;
//Below mapOptions var includes styling maps and zoom level of your map, it also includes mapTypeId.
var mapOptions = {
center : new google.maps.LatLng(
markers[0].latitude, markers[0].longitude),
zoom : 5,
scrollwheel: false, 
styles : [ {
"featureType" : "administrative",
"elementType" : "labels.text.fill",
"stylers" : [ {
"color" : "#444444"
} ]
}, {
"featureType" : "landscape",
"elementType" : "all",
"stylers" : [ {
"color" : "#f2f2f2"
} ]
}, {
"featureType" : "poi",
"elementType" : "all",
"stylers" : [ {
"visibility" : "off"
} ]
}, {
"featureType" : "poi.park",
"elementType" : "geometry.fill",
"stylers" : [ {
"visibility" : "on"
}, {
"color" : "#1ba093"
} ]
}, {
"featureType" : "road",
"elementType" : "all",
"stylers" : [ {
"saturation" : -100
}, {
"lightness" : 45
} ]
}, {
"featureType" : "road.highway",
"elementType" : "all",
"stylers" : [ {
"visibility" : "simplified"
} ]
}, {
"featureType" : "road.arterial",
"elementType" : "labels.icon",
"stylers" : [ {
"visibility" : "off"
} ]
}, {
"featureType" : "transit",
"elementType" : "all",
"stylers" : [ {
"visibility" : "off"
} ]
}, {
"featureType" : "water",
"elementType" : "all",
"stylers" : [ {
"color" : "#00748c"
}, {
"visibility" : "on"
} ]
} ],
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document
.getElementById("map_canvas"), mapOptions);
addYourLocationButton(map,marker);  
//Create and open InfoWindow.
var infoWindow = new google.maps.InfoWindow();                      
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(
data.latitude, data.longitude);
var marker = new google.maps.Marker({
position : myLatlng,
animation: google.maps.Animation.DROP,
map : map,
title : //Any title that you want to display while cursor over the marker.
});
//Click event 
(function(marker, data) {
google.maps.event
.addListener(
marker,
"click",
function(e) {                                                   
infoWindow
.setContent("<div style = 'width:300px;min-height:50px'>+Write information about your location if you want.+"</div>");
infoWindow
.open(map, marker);
});
})(marker, data);
}
}
});
}

InformationsquelleAutor Preet

Vous devez vous connecter pour publier un commentaire.