How to add marker to a location on google map dynamically

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

Contributors

2

Replies

6 Days

Discussion Span

2 Months Ago

Last Updated

19

Views

Jessfly

Newbie Poster

5 posts since Feb 2013

Reputation Points: 0

Solved Threads: 1

Skill Endorsements: 0

3 Months Ago

Show Comments

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>

AleMonteiro

Master Poster

752 posts since Aug 2010

Reputation Points: 129

Solved Threads: 140

Skill Endorsements: 23