Ok ,
il mio tentativo diciamo che è riuscito in parte ..... ora geolocalizzo e leggo il database ma non riesco a capire come mai mi inserisce solo il primo marker del mio database. Mi potete aiutare ? inserisco il codice qui di seguito. Grazie in anticipo
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Mappa</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
1: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
2: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(45.037277, 7.636477);
var mapOptions = {
zoom: 13,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
downloadUrl("config_map.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 codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
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="panel">
<input id="address" type="textbox" value="">
<input type="button" value="Inserisci il nome della tua città" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
</html>