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>

--------

Edited by diafol: wrong forum

2
Contributors
2
Replies
25
Views
4 Years
Discussion Span
Last Post by Jessfly
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>
Votes + Comments
Nice
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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.