CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
user3238174
user3238174

Reputation: 17

How to display location on markers of google maps when clicked?

I have extracted the latitude and logitude from my database tables and have shown it on the google maps with markers.Now I want to get location to be displayed on the markers when they are clicked.I tried a lot but couldn't find the way.Can you please suggest how shall I proceeed?I am also giving the sample code which may help you.Kindly help 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 * FROM tweets1");
$res =  mysql_fetch_array($sql);
$lat_d = $res['geo_lat'];
$long_d = $res['geo_long'];

// mimic a result array from 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 with options
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    <?php
        // uncomment the 2 lines below to get real data from the db
        $result = mysql_query("SELECT * FROM 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>

Upvotes: 0

Views: 1660

Answers (2)

alpakyol
alpakyol

Reputation: 2459

Improve your addMarker() function as it 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);
    });
}

Upvotes: 1

Alpha Yang
Alpha Yang

Reputation: 36

You can add location info as marker label. Just follow the example http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/examples/basic.html

Upvotes: 0

Related Questions