javascript - How to display location on markers of google maps when clicked? -
i have extracted latitude , logitude database tables , have shown on google maps markers.now want location displayed on markers when clicked.i tried lot couldn't find way.can please suggest how shall proceeed?i giving sample code may you.kindly me out.
<?php $dbname='140dev'; $dbuser='root'; $dbpass='root'; $dbserver='localhost'; $dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass"); mysql_select_db("$dbname") or die(mysql_error()); $sql = mysql_query("select * tweets1"); $res = mysql_fetch_array($sql); $lat_d = $res['geo_lat']; $long_d = $res['geo_long']; // mimic result array mysql $result = array(array('geo_lat'=>$lat_d,'geo_long'=>$long_d)); ?> <!doctype html> <html> <head> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key="api_key"&sensor=false"></script> <script type="text/javascript"> var map; function initialize() { // set static latitude, longitude value var latlng = new google.maps.latlng(<?php echo $lat_d; ?>, <?php echo $long_d; ?>); // set map options var myoptions = { zoom: 16, center: latlng, pancontrol: true, zoomcontrol: true, scalecontrol: true, maptypeid: google.maps.maptypeid.roadmap } // create map object options map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); <?php // uncomment 2 lines below real data db $result = mysql_query("select * tweets1"); while ($row = mysql_fetch_array($result)) echo "addmarker(new google.maps.latlng(".$row['geo_lat'].", ".$row['geo_long']."), map);"; ?> } function addmarker(latlng, map) { var marker = new google.maps.marker({ position: latlng, map: map, draggable: true, // enables drag & drop animation: google.maps.animation.drop }); var contentstring = latlng.lat() + " , " + latlng.lng(); geocoder.geocode({'latlng': latlng}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { if (results[1]) { map.setzoom(11); marker = new google.maps.marker({ position: latlng, map: map }); infowindow.setcontent(results[1].formatted_address); infowindow.open(map, marker); } else { alert('no results found'); } } else { alert('geocoder failed due to: ' + status); } }); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map,marker); }); } </script> </head> <body onload="initialize()"> <div style="float:left; position:relative; width:550px; border:0px #000 solid;"> <div id="map_canvas" style="width:950px;height:700px;border:solid black 1px;"> </div> </div> </body> </html>
improve addmarker()
function shows lat-lng values of clicked marker on infowindow:
function addmarker(latlng, map) { var marker = new google.maps.marker({ position: latlng, map: map, draggable: true, // enables drag & drop animation: google.maps.animation.drop }); var contentstring = latlng.lat() + " - " + latlng.lng(); var infowindow = new google.maps.infowindow({ content: contentstring }); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map,marker); }); }
Comments
Post a Comment