Geo localizzazione con marker su db mysql

**Puleggio** · 22-08-2014, 14:55

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>

**Puleggio** · 22-08-2014, 16:02

Scusate ....

codice:

<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>

**Puleggio** · 22-08-2014, 16:42

OK .... risolto
mancava nel codice che avevo inserito il caricamento della mappa legata ai marker.
Inserisco il codice finito per chi ne volesse usufruire in futuro e mi scuso se alle volte divento irascibile nelle risposte ma, quando non riesco a risolvere un problema e ci giro attorno mi imbufalisco .....
alcune modifiche effettuate: ho eliminato il marker della geolocalizzazione che a me non serviva perché mi bastava che localizzasse la zona senza inserire altri marker inutili.

Ciaooo

Codice PHP:


<!DOCTYPE html><html>  <head>    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">    <meta 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>
    //<![CDATA[    var geocoder;    var map;    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'      }    };        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); }      
    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 load() {            var infoWindow = new google.maps.InfoWindow;
      // Change this depending on the name of your PHP file      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 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>

Discussione: Geo localizzazione con marker su db mysql

Strumenti discussione

Ricerca discussione

Visualizza

Geo localizzazione con marker su db mysql

Permessi di invio