View all data on Google Map with image, using PHP,SQL, and XML

View all data on Google Map with image, using PHP,SQL, and XML

, Writer

In this tutorial shows you how to put database table data on Google Map using the PHP SQL and XML. is very simple 1st you have create ab table in your database column like "id, name, type, price, address, image, lat, lng"  and then after use php to make xml API.

Create file fetchXMLdata.php

<?php
$con=mysql_connect("localhost","root","");
$bd=mysql_select_db("database");
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
$query = mysql_query("SELECT * FROM room_ad LIMIT 0, 10");
$row = mysql_fetch_array($query);
while ($row = @mysql_fetch_assoc($query)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("ad_title",$row['ad_title']);
$newnode->setAttribute("ad_location", $row['ad_location']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
$newnode->setAttribute("ad_service", $row['ad_service']);
$newnode->setAttribute("p_img", $row['p_img']);
$newnode->setAttribute("ad_uq_id",$row['ad_uq_id']);
$newnode->setAttribute("ad_rent_price",$row['ad_rent_price']);
$newnode->setAttribute("ad_service",$row['ad_service']);
}
echo $dom->saveXML();
?>

Checking that your echo XML output works or Not,

If your browser displaying all table marker data from your database as an XML output it means your XML API created successfully then you can use this URL as an API in Map.

<!DOCTYPE html>
<html>
<head>
  <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.mname{
font-size: 18px;
font-weight: bold;
color: black;
}

.mimg{
height: 77px;
width: 97px;
float:left;
margin-right:5px;
border-radius:3px;
margin-left:-5px;
background:url(me.gif);
background-size:cover;
}
.mimg[src='Error.src']{
display: none;
}
.madd{
font-size:12px;
color:#060606;
margin-top:10px;
}
</style>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDklKBPGZ72qn5pS6lrHwE_0ukya4HpYjI&callback=initMap"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
sell: {
icon: 'https://developers.google.com/maps/documentation/javascript/images/default-marker.png',
shadow: 'https://developers.google.com/maps/documentation/javascript/images/default-marker.png'
},

Hostel: {
icon: 'https://developers.google.com/maps/documentation/javascript/images/default-marker.png',
shadow: 'https://developers.google.com/maps/documentation/javascript/images/default-marker.png'
},

rent: {
icon: 'https://developers.google.com/maps/documentation/javascript/images/default-marker.png',
shadow: 'https://developers.google.com/maps/documentation/javascript/images/default-marker.png'
}

};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-33.863276, 151.207977),
zoom: 6,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("fetchXMLdata.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 addressl = markers[i].getAttribute("address");
var address = addressl.slice(0,80);
var type = markers[i].getAttribute("type");
var img = markers[i].getAttribute("img");
var uid = markers[i].getAttribute("url");
var price = markers[i].getAttribute("price");
//var ser = markers[i].getAttribute("ad_service");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
//alert(parseFloat(markers[i].getAttribute("lat")));
var html ="<span class='madd'>" + name + "...</span><img src='https://hostmystory.com/uploads/larg/5aa2e2a03aed3php-sql.jpg' class='mimg'>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'mouseover', 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 style="background:#EEF1F2" onload="load()">

<div id="map" style="width:100%; height:100%; margin-top: -10px;"></div>
<script>
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};


$('body').popover({ selector: '[data-popover]', trigger: 'click hover', placement: 'auto', delay: {show: 50, hide: 400}});

</script>

</body>
</html>

if any problem to show marker data you can also use Google marker  XML API .

https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml

more Details visit on Link.

 


Comments / Answer

Leave a comment & ask question