1,105,585 Community Members

How to add marker to a location on google map dynamically

Member Avatar
Jessfly
Newbie Poster
5 posts since Feb 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
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>

--------

Member Avatar
AleMonteiro
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]
 
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>
Member Avatar
Jessfly
Newbie Poster
5 posts since Feb 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
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 three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: