1.11M Members

How to add marker to a location on google map dynamically

 
0
 

I run a script where users can select locations from dynamic select menu. When a user selects his location, a google map should load on the page. I have 2 problems on this issue. Pls help me fix them:

1) Map is loading, but it can't mark the place. I need a marker, tried some codes posted on this forum, but they don't work.

2) Map should be loaded based on selected location. But my code can only fetch default map.

Here's the entire code:

--------

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 400px; width: 600px; top: 40px}
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      var geocoder;
      var map;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(23.863391, 90.433617);
        var mapOptions = {
          zoom: 14,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      }

      function codeAddress() {
        var address = document.getElementById('address').value;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }

    </script>

  </head>
    <body onLoad="initialize()">
    <div>
<select name="loc" size="1" onFocus="initialize()">
  <option selected>Uttara</option>
  <option>Banani</option>
  <option>Mirpur</option>
</select>
    </div>
    <div id="map_canvas"></div>
  </body>
</html>

--------

 
2
 

Check this sample, I got it from Google Maps Docs and just modify it a little bit:

<!DOCTYPE html>
<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>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

    var beaches = 
    [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 161.259052, 5],
      ['Cronulla Beach', -36.028249, 153.157507, 3],
      ['Manly Beach', -31.80010128657071, 151.38747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.159302, 1]
    ];

    function initialize() {

        var myOptions = {
            zoom: 10,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        setMarkers(map, beaches);
    }   



function setMarkers(map, locations) {

    var bounds = new google.maps.LatLngBounds();

    for (var i = 0; i < locations.length; i++) 
    {

            var beach = locations[i];

            var coords = new google.maps.LatLng(beach[1], beach[2]);

            var contentString = '<div id="content">'+
                'Info Window Test:' +  beach[0] + 
                '</div>';

            var infowindow = new google.maps.InfoWindow({content: contentString});

            var markerImage = new google.maps.MarkerImage
            (
                "http://www.alawar.com/games_img/games/sky-bubbles/sky-bubbles-deluxe-logosmall.gif",
                new google.maps.Size(44, 44, "px", "px"),
                new google.maps.Point(0, 0),
                new google.maps.Point(0, 0),
                new google.maps.Size(20, 20, "px", "px")
            );

            var marker = new google.maps.Marker({
                position: coords,
                map: map,
                icon: markerImage,
                title: beach[0],
                zIndex: beach[3]
            });

            google.maps.event.addListener(marker, 'click', 
                function (infowindow, marker) {
                    return function () {
                        infowindow.open(map, marker);
                    };
                }(infowindow, marker)
            );

            bounds.extend(coords);
            map.fitBounds(bounds);
    }
}

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>
 
0
 

Thanks AleMonteiro. It works, can mark a place on map.
I'll complete the project and let all know how to do it dynamically.

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: