Show Markers on google map by using data from mysql in php

Virendrasingh Published at Dev

Virendrasingh

I attached image here for an example.

Currently I show locations on map in a HTML page with static code like,

Java scripts to load map on page :

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"> </script>

 <script type="text/javascript">
   var map;
   var centerPos = new google.maps.LatLng(37.0902,95.7129);
   var zoomLevel = 4;
   function initialize() 
    {
      var mapOptions = 
      {
       center: centerPos,
       zoom: zoomLevel
      };
      map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions );
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>

Google map Div :

    <div id="Community-Google-Map-Div">
          <div class="wrap">
            <div id="map-canvas">
            </div>
          </div>
    </div>

Java scripts to load Different locations :

  <script type="text/javascript">

    function LocateSales() 
    {
      var map;
      var centerPos = new google.maps.LatLng(22.4700,77.5667);
      var zoomLevel = 4;

      var mapOptions = 
      {
        center: centerPos,
        zoom: zoomLevel
      };
      map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions );

      var locations = [ ['USA', 50.0000, 79.7800],
                        ['Second', 82.9667, 77.5667],
                        ['Third', 78.4700, 77.0300]
                      ];

          for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      title: locations[i][0],map: map });
       }
  }
   google.maps.event.addDomListener(window, 'load', initialize);
  </script>

So, Please tell me how to solved this !

Virendrasingh

Thanks everyone for your response but I got answer. I post it here,

<?php
error_reporting(E_ALL ^ E_DEPRECATED);

$conn = mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("slcommunitydb") or die(mysql_error());
?>

<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps</title>

<!-------- Customizable Css for Map  ----------------------------->
    <style type="text/css">
        body { font: normal 10pt Helvetica, Arial; }
        #map { width: 500px; height: 300px; border: 0px; padding: 0px; }
    </style>

    <!---------------- Java Scripts for Map  ----------------->
    <script src="http://maps.google.com/maps/api/js?key=xxxxxxxxxxxxxxxx&sensor=false" 
    type="text/javascript"></script>

    <!------------- Java Scripts for Map  ------------------->
    <script type="text/javascript">

    //--------------------- Sample code written by vIr ------------
    var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
               new google.maps.Size(32, 32), new google.maps.Point(0, 0),
               new google.maps.Point(16, 32));
                    var center = null;
                    var map = null;
                    var currentPopup;
                    var bounds = new google.maps.LatLngBounds();
                    function addMarker(lat, lng, info) {
                        var pt = new google.maps.LatLng(lat, lng);
                        bounds.extend(pt);
                        var marker = new google.maps.Marker({
                            position: pt,
                            icon: icon,
                            map: map
                        });
                        var popup = new google.maps.InfoWindow({
                            content: info,
                            maxWidth: 300
                        });
                        google.maps.event.addListener(marker, "click", function() {
                            if (currentPopup != null) {
                                currentPopup.close();
                                currentPopup = null;
                            }
                            popup.open(map, marker);
                            currentPopup = popup;
                        });
                        google.maps.event.addListener(popup, "closeclick", function() {
                            map.panTo(center);
                            currentPopup = null;
                        });
                    }           
                    function initMap() {
                        map = new google.maps.Map(document.getElementById("map"), {

                            center: new google.maps.LatLng(0, 0),
                            zoom: 14,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            mapTypeControl: true,
                            mapTypeControlOptions: {
                                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                            },
                            navigationControl: true,
                            navigationControlOptions: {
                                style: google.maps.NavigationControlStyle.ZOOM_PAN
                            }
                        });
     <?php

     $query = mysql_query("SELECT * FROM salesmapmarkers")or die(mysql_error());
    while($row = mysql_fetch_array($query))
    {
      $name = $row['name'];
      $lat = $row['lat'];
      $lon = $row['lon'];
      $desc = $row['desc'];

   echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n");
   }
  ?>
   center = bounds.getCenter();
   map.fitBounds(bounds);

   }
   </script>

  </head>
    <body onLoad="initMap()" style="margin:0px; border:0px; padding:0px;">
       <div id="map"></div>
    </body>
 </html>

Collected from the Internet

Please contact [email protected] to delete if infringement.