php - Not Displaying The map and the multiple markers -
i trying display many markers on google map.all works fine in cases
- i display 1 marker
- i write gps localisations of different markers
i have data base contains longitude,latitude values want dispaly values markers on map
here try not working,plz me spend day :/
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>multi-marqueurs</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <? php $connexion=mysql_connect("localhost", "root", "") or die(mysql_error()); mysql_select_db("project",$connexion) or die(mysql_error()); $result = mysql_query("select lattitude,longitude intervenantconn "); $listedespoints=''; while($row = mysql_fetch_array($result)){ if($listedespoints!='') $listedespoints.=','; $listedespoints.='['.$row['lattitude'].','.$row['longitude'].']'; } mysql_close($connexion); ?> <div id="map" style="width: 600px; height: 550px;"></div> <script type="text/javascript"> var listedespoints=[ <? php echo $listedespoints; ?> ]; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 6, center: new google.maps.latlng(47.4,1.6), maptypecontrol: true, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu }, navigationcontrol: true, navigationcontroloptions: { style: google.maps.navigationcontrolstyle.small, position: google.maps.controlposition.top_right }, scalecontrol: true, streetviewcontrol: false, maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow(); var marker, i; (i = 0; < liste_des_points.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(liste_des_points[i][1], liste_des_points[i][2]), map: map }); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } </script> </body> </html>
1) @mauno-v told use liste_des_points
instead of listedespoints
loop.
2) in loop use secnd , third entry liste_des_points[i][1], liste_des_points[i][2]
while create 2 entries.
3) in click event use locations[i][0]
locations not defined.
so create list 3 entries ['location name','latitude','longitude']
or change indices , variable names.
see below:
<? error_reporting(e_all); ini_set('error_reporting','on'); ?> <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>multi-marqueurs</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <?php /*$connexion=mysql_connect("localhost", "root", "") or die(mysql_error()); mysql_select_db("project",$connexion) or die(mysql_error()); $result = mysql_query("select lattitude,longitude intervenantconn "); $listedespoints=''; while($row = mysql_fetch_array($result)){ if($listedespoints!='') $listedespoints.=','; $listedespoints.='['.$row['lattitude'].','.$row['longitude'].']'; } mysql_close($connexion);*/ $listedespoints='[\'location 1\',47.45,2],[\'location 2\',47.46,1.6],[\'location 2\',47.47,1]'; ?> <div id="map" style="width: 600px; height: 550px;"></div> <script type="text/javascript"> var liste_des_points=[ <?php echo $listedespoints; ?> ]; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 6, center: new google.maps.latlng(47.4,1.6), maptypecontrol: true, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu }, navigationcontrol: true, navigationcontroloptions: { style: google.maps.navigationcontrolstyle.small, position: google.maps.controlposition.top_right }, scalecontrol: true, streetviewcontrol: false, maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow(); var marker, i; (i = 0; < liste_des_points.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(liste_des_points[i][1], liste_des_points[i][2]), map: map }); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(liste_des_points[i][0]); infowindow.open(map, marker); } })(marker, i)); } </script> </body> </html>
Comments
Post a Comment