Ciao Raga, urge aiutino
Non so se è la sezione giusta, ma ci provo.
Volevo personalizzare i marker e le etichette di google maps,
ho una serie di dati rilevati tramite php e mysql che faccio entrare in google maps.
Ho creato due mappe (2 pagine) la prima funziona tutto, ho impostato la personalizzazione dei markers che cambiano a secondo del tipo (ristoranti, bar, trattorie, etc.)
Per la seconda pagina ho utilizzato lo stesso script ovviamente adattando i nomi campi, e i marker non cambiano, vengono fuori quelli di default, qualcuno mi sa spiegare il motivo ?
Inoltre, qualcuno sa come posso personalizzare le etichette (labels) all'interno del marker di google maps, ovviamente andando a scrivere un eventuale numero prelevato dalla tabella mysql
Sotto il codice utilizzato
codice:<!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>PHP/MySQL & Google Maps Example</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var customIcons = { restaurant: { icon: 'images/marker_ristorante.png' }, bar: { icon: 'images/marker_bar.png' } }; function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(43.6145, 12.3418), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("inc/maps.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<b>" + name + "</b> <br/>" + address; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.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" style="width: 500px; height: 300px"></div> </body> </html>


Rispondi quotando