PHP/MYSQL with google maps -
i need extract data mysql table , create markers displayed on google map.
php code outputting xml
<?php function parsetoxml($htmlstr) { $xmlstr=str_replace('<','<',$htmlstr); $xmlstr=str_replace('>','>',$xmlstr); $xmlstr=str_replace('"','"',$xmlstr); $xmlstr=str_replace("'",''',$xmlstr); $xmlstr=str_replace("&",'&',$xmlstr); return $xmlstr; } $connection=mysql_connect (localhost, $username, $password); if (!$connection) { die('not connected : ' . mysql_error()); } $db_selected = mysql_select_db('data1', $connection); if (!$db_selected) { die ('can\'t use db : ' . mysql_error()); } $query = "select * health_block"; $result = mysql_query($query); if (!$result) { die('invalid query: ' . mysql_error()); } header("content-type: text/xml"); echo '<markers>'; while ($row = @mysql_fetch_assoc($result)){ echo '<marker '; echo 'hname="' . parsetoxml($row['hname']) . '" '; echo 'lat="' . $row['lat'] . '" '; echo 'longt="' . $row['longt'] . '" '; echo '/>'; } echo '</markers>'; ?> below output above code. (the code outputs records database table):
<markers> <marker hname="chc anchuthengu" lat="8.6734310" longt="76.7581770"/> <marker hname="phc perumathura" lat="8.6218640" longt="76.7975220"/> <marker hname="phc keezhattingal" lat="8.6982130" longt="76.7915000"/> <marker hname="phc azhoor" lat="8.6408080" longt="76.8252470"/> </markers> php main page displaying markers in google map
<!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="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> //<![cdata[ var customicons = { restaurant: { icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' }, bar: { icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' } }; function load() { var map = new google.maps.map(document.getelementbyid("map"), { center: new google.maps.latlng(8.491118,76.949840), zoom: 12, maptypeid: 'roadmap' }); var infowindow = new google.maps.infowindow; downloadurl("phpsqlajax_genxml.php", function(data) { var xml = data.responsexml; var markers = xml.documentelement.getelementsbytagname("marker"); (var = 0; < markers.length; i++) { var hname = markers[i].getattribute("hname"); var point = new google.maps.latlng(parsefloat(markers[i].getattribute("lat")), parsefloat(markers[i].getattribute("longt"))); var html = "<b>" + hname + "</b>"; 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, '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" style="width: 1400px; height: 800px"></div> </body> </html> while executing code in browser, displays google map correctly. markers not shown. great if help.
thanks
jeny
i error in ie:
message: 'type' undefined line: 38 char: 7 code: 0 this in chrome:
uncaught referenceerror: type not defined v3_so_phpmysql.html:38 if fix (by defining var type = "bar";), see markers.
function load() { var map = new google.maps.map(document.getelementbyid("map"), { center: new google.maps.latlng(8.491118,76.949840), zoom: 11, maptypeid: 'roadmap' }); var infowindow = new google.maps.infowindow; downloadurl("so_phpsqlajax_genxml_20130731.xml", function(data) { var xml = data.responsexml; var markers = xml.getelementsbytagname("marker"); (var = 0; < markers.length; i++) { var hname = markers[i].getattribute("hname"); var point = new google.maps.latlng(parsefloat(markers[i].getattribute("lat")), parsefloat(markers[i].getattribute("longt"))); var html = "<b>" + hname + "</b>"; var type = "bar"; 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); } }); } 
Comments
Post a Comment