CODEWITHSUNDEEP
javascriptphpsqlgoogle-maps
Mohd Harris
Mohd Harris

Reputation: 5

google map marker from database using php sql

i have this code to populate markers from database on google map , but it's is not working ,the xml file is perfectly working , i referred to https://developers.google.com/maps/articles/phpsqlajax_v3, but of no use.

markers.php code

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "jainmunilocator";
$connection=mysqli_connect($servername, $username, $password, $dbname);;
if (!$connection) {
    die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT name,id,lat,lng FROM muni_location,munishri WHERE mid=id";
header('Content-Type: application/xml');
$result=mysqli_query($connection,$sql);
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
if (mysqli_num_rows($result) > 0)
  {
while($row = mysqli_fetch_assoc($result)){
if(isset($row['id'])){ $id = $row['id']; } 
 if(isset($row['name'])){ $name = $row['name']; } 
 if(isset($row['lat'])){ $lat = $row['lat']; } 
 if(isset($row['lng'])){ $lng = $row['lng']; } 
$node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("id",$id);
  $newnode->setAttribute("name", $name);
  $newnode->setAttribute("lat", $lat);
  $newnode->setAttribute("lng", $lng);
  }
  }
 echo $dom->saveXML();

?>

*GOOGLE MAP MARKER CODE**

    <!DOCTYPE html >
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>PHP/MySQL & Google Maps Example</title>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
        <script type="text/javascript">
        //<![CDATA[


        function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(22.6145,77.3418),
            zoom: 7,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;
          var gm_marker = new Array();     

          // Change this depending on the name of your PHP file
          downloadUrl("markers.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var id = markers[i].getAttribute("id");
              var name = markers[i].getAttribute("name");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              //var html = "<b>" + name + "</b> <br/>" + id;
              var html = name;
              var icon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                title: name
              });
              addMarker(point,name);
              bindInfoWindow(marker, map, infoWindow, html);

            }
          });
        }

        //stackoverflow
        function addMarker(latLng, contentstr) {
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      google.maps.event.addListener(marker, 'click', function() {   
          infowindow = new google.maps.InfoWindow({
              content: contentstr
          });  

       });
      gm_markers.push(marker);

    }
    setAllmap(map);
    function setAllMap(map) {
  for (var i = 0; i < gm_markers.length; i++) {
    gm_markers[i].setMap(map);
  }
  function showMarkers() { setAllMap(map);}


        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="map-canvas-show" style="width: 100%; height: 300px;"></div> 
      </body>

    </html>

Upvotes: 1

Views: 2139

Answers (1)

Elvn
Elvn

Reputation: 3057

There are 2 elements that I think are essential, which I don't see in your code. This is from my source and I'm including them here to show the concepts. You can implement this type of thing within your for loop or break out into functions. I prefer functions, so I did it this way.

First, I would confirm that your marker array is not length 0--that's an easy sanity check--make sure you have markers to load.

Build the Google Map marker stack

While there are markers...

  1. Create the marker with new

  2. Create the listener with new

  3. Push the marker into Google's marker object as an array of marker objects

// Add a marker to the map and push to the array.
function addMarker(latLng, contentstr) {
  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });
  google.maps.event.addListener(marker, 'click', function() {   
      infowindow = new google.maps.InfoWindow({
          content: contentstr
      });  

   });
  gm_markers.push(marker);

}

To show the markers assign the marker to the map

Associate each marker from the array to your map canvas.

// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < gm_markers.length; i++) {
    gm_markers[i].setMap(map);
  }

To clear the Google Map markers (off)

To reinforce the concept. To clear the markers unplug the map markers object array from your map object.

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);

}

To show already loaded markers (on)

// Shows any markers currently in the array.
function showMarkers() {
  setAllMap(map);

}

In the view

Showing the map with the markers

<div id="map-canvas-show" style="width: 100%; height: 300px;"></div>

Debugging steps (added)

  1. I would suggest first to confirm that valid coordinates are being loaded into the marker vars in your php. In fact, I would start with a test with one single marker. Put in debug statements to show your lat and lng. This is essential. Confirm valid marker data from php into your js.

  2. Then, you need to confirm that those markers are within the visible range of your Google map. Are the markers there, just not visible? To help, I would suggest that you make Google map zoomed way out - scale it so you'd see a marker halfway around the world.

Upvotes: 1

Related Questions