CODEWITHSUNDEEP
phpmysqlgoogle-mapsgoogle-maps-api-3
Asma.O
Asma.O

Reputation: 465

Using PHP and MySQL to show multiple markers on Google Maps

I tried to use PHP and MySQL to show multiple markers on a Google Maps, but it doesn't work as the map doesn't show. Please help me with this and don't forget to change the mapkey. Thank you.

Here is my code:

      <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

      <?php

      $connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
      mysql_select_db("survey",$connexion) or die(mysql_error());

      //la requête pour obtenir la liste des points
      $result = mysql_query("SELECT latitude,longitude FROM appreciation order by id");

      //récupération de tous les points pour les mettre dans une table façon JavaScript

      $listeDesPoints='';
      while($row = mysql_fetch_array($result)){
      if($listeDesPoints!='') $listeDesPoints.=','; 
      $listeDesPoints.='['.$row['lattitude'].','.$row['longitude'].']';
      }
      //et voilà $listeDesPoints est prêt à être affiché dans le script

      //on ferme la connexion à la base de données
      mysql_close($connexion);
      ?>
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Insert title here</title>
      <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js? key=AIzaSyB3is760vHXhki9vS_LpiWAig8a33GP3CY&sensor=false">
      </script>

      <script type="text/javascript">
      function initialize(){
      var centreCarte = new google.maps.LatLng(34.02,-6.83);

      var optionsCarte = {
      zoom: 12,
      center: centreCarte,
      keyboardShortcuts: true,
      scrollwheel: true,
      panControl: false,
      mapTypeControl: true,
      overviewMapControl: true,
      rotateControl: true,
      scaleControl: true,
      streetViewControl: true,  
      zoomControl: true,        
      mapTypeId: google.maps.MapTypeId.HYBRID                                        
      }

      var map = new google.maps.Map(document.getElementById("map"), optionsCarte);





      var liste_des_points=[
      <?php echo $listeDesPoints; ?>
      ];


      var i=0,li=liste_des_points.length;
      while(i<li){
      new google.maps.Marker({
      position: new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]),
      map: Carte,
      title: "Marqueur-"+i,
           });
      i++;
 }


 }
      </script>
      </head>
      <body onload="initialize()">

      <div id="map" style="width:80%; height:80%" >
      </div>
      </body>
      </html>

Upvotes: 1

Views: 2371

Answers (1)

torbenc
torbenc

Reputation: 11

You assign the map object to the variable map, but place the markers on the non existig map "Carte". Try map: map in the Marker object.

Upvotes: 1

Related Questions