javascript - google map marker from database using php sql -
i have code populate markers database on google map , it's not working ,the xml file working , referred https://developers.google.com/maps/articles/phpsqlajax_v3, 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 muni_location,munishri 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 depending on name of php file downloadurl("markers.php", function(data) { var xml = data.responsexml; var markers = xml.documentelement.getelementsbytagname("marker"); (var = 0; < 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) { (var = 0; < 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>
there 2 elements think essential, don't see in code. source , i'm including them here show concepts. can implement type of thing within loop or break out functions. prefer functions, did way.
first, confirm marker array not length 0--that's easy sanity check--make sure have markers load.
build google map marker stack
while there markers...
create marker new
create listener new
push marker google's marker object array of marker objects
// add marker map , push 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 markers assign marker map
associate each marker array map canvas.
// sets map on markers in array. function setallmap(map) { (var = 0; < gm_markers.length; i++) { gm_markers[i].setmap(map); } to clear google map markers (off)
to reinforce concept. clear markers unplug map markers object array map object.
// removes markers map, keeps them in array. function clearmarkers() { setallmap(null); } to show loaded markers (on)
// shows markers in array. function showmarkers() { setallmap(map); } in view
showing map markers
<div id="map-canvas-show" style="width: 100%; height: 300px;"></div> debugging steps (added)
i suggest first confirm valid coordinates being loaded marker vars in php. in fact, start test 1 single marker. put in debug statements show lat , lng. essential. confirm valid marker data php js.
then, need confirm markers within visible range of google map. markers there, not visible? help, suggest make google map zoomed way out - scale you'd see marker halfway around world.
Comments
Post a Comment