CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3maps
Swapnil Dinkar
Swapnil Dinkar

Reputation: 134

Bounds not working, does not even display markers when trying to add bounds

The current code below does not even show markers, but when the bounds are removed, the markers start appearing. I dont know where I am going wrong. All I want to do is zoom the map to include all of the 3 markers. Currently it is zooming to 0,0 . I do provide my api key, so that is not the problem.

Code:

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=<key provided>&sensor=true">
    </script>

    <script type="text/javascript">
      function initialize() {
var markers = [
{ lat: 61.912113, lng: 61.912113 },{ lat: 62.912149, lng: 62.912144 },{ lat: 61.411123, lng: 61.411123 }];

        var mapOptions = {
center: new google.maps.LatLng(0,0),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

var bounds = new google.maps.LatLngBounds ();
var LatLngList = array (new google.maps.LatLng (markers[0].lat,markers[0].lng), new google.maps.LatLng (markers[1].lat,markers[1].lng), new google.maps.LatLng (markers[2].lat,markers[2].lng));
for (i = 0; i < markers.length; i++) {
var data = markers[i];

var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: "text"
  });
}
for (var i = 0; i < LatLngList.length; i++) {
  bounds.extend (LatLngList[i]);
}
map.fitBounds (bounds);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Upvotes: 0

Views: 133

Answers (1)

Sunil D.
Sunil D.

Reputation: 18193

You have an error when you create the array on this line (I've truncated the code for readability):

var LatLngList = array (new google.maps.LatLng (markers[0].lat,markers[0].lng) );

Change it to:

var LatLngList = Array (new google.maps.LatLng (markers[0].lat,markers[0].lng) );

or

var LatLngList = [ new google.maps.LatLng (markers[0].lat,markers[0].lng) ];

Upvotes: 1

Related Questions