Member Avatar for Jessfly

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 because: wrong forum
  • 2 Contributors
  • 2 Replies
  • 4K Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Jessfly

Recommended Answers

All 2 Replies

Member Avatar for AleMonteiro

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>
commented: Nice +0
Member Avatar for Jessfly

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.