J'ai réussi à implémenter la 'Info Box' sur une de mes maps qui charge des emplacements sauvegardés dans une base de données mySQL, mais je voudrais faire quelques changements mais je ne sais pas comment. Le code que j'utilise est ci-dessous, mais j'aimerais pouvoir remplacer le comportement "par défaut" de la boîte d'information, c'est-à-dire apparaître à côté de chaque marqueur lorsque la carte se charge, la boîte d'information n'apparaissant que Une fois le marqueur cliqué, faites un panoramique pour centrer la carte sur ce marqueur. Ensuite, lorsque l'on clique sur le marqueur suivant, la boîte d'information passe du premier au marqueur nouvellement cliqué, à nouveau avec la fonctionnalité panoramique et centre.Personnalisation InfoBox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map My Finds - All Locations</title>
<link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript" src="js/infobox.js"></script>
<script type="text/javascript">
var customIcons = {
0: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
1: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'roadmap'
});
// Change this depending on the name of your PHP file
downloadUrl("loadalllocations.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var locationname = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var totalfinds = markers[i].getAttribute("totalfinds");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var icon = {};
if (totalfinds == 0) {
icon = customIcons[0];
} else if (totalfinds >= 1) {
icon = customIcons[1];
}
var marker = new google.maps.Marker({
map: map,
position: point,
title: address,
icon: icon.icon,
shadow: icon.shadow
});
bounds.extend(point);
map.fitBounds(bounds);
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: orange; padding: 5px;";
boxText.innerHTML = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";;
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.50
,width: "180px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
ib.open(map, marker);
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body onLoad="load()">
<div id="map"></div>
</body>
</html>
Je voudrais aussi apprendre un peu plus sur la boîte d'information, en termes de changement de la couleur, les marges etc, mais je ne l'ai trouvé à la direction http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/reference.html qui est pas tout à fait aussi détaillée que J'espèrerais. Y a-t-il un autre endroit où je peux aller pour obtenir des informations plus détaillées?
Ceci a maintenant été résolu et le code fonctionne.
Salut, merci beaucoup pour répondre à mon message. J'ai regardé les autres exemples que vous avez mis en évidence, et je pensais que l'InfoBox était la meilleure option. J'ai cependant essayé le code re. l'événement click, vous avez suggéré, donc les dernières lignes de mon code sont google.maps.event.addListener (marqueur, 'click', function() {var ib = nouveau InfoBox (myOptions); ib.open (map, marker) ;}) L'événement click fonctionne, mais peu importe le marqueur sur lequel je clique sur l'InfoBox n'apparaît qu'à côté du dernier marqueur sur la carte. Avez-vous par hasard des idées sur la façon dont je peux contourner cela? Merci beaucoup encore une fois. Chris – IRHM
J'ai eu le même problème, la [solution suggérée] (http://stackoverflow.com/questions/3576488/google-maps-infowindow-only-loading-last-record-on-markers) était de sortir l'info fenêtre à une portée plus globale et mettre à jour sa fonction. Ceci est lié aux fermetures de javascript. Bonne chance! – ZMorek
Salut, merci beaucoup de jeter un coup d'oeil à mon message et pour votre suggestion. Malheureusement, je n'arrive pas à faire fonctionner ça. Je me demandais si c'était peut-être parce que vous utilisez le 'InfoWindow' alors que j'utilise l'InfoBox. Cordialement, Chris. – IRHM