Bound markers on Google maps API taken from a JSON

I have a problem bounding the markers of a Json in my google maps. The code tries to read the coordinates of a Json, plot the markers and the polylines and finally center the map to its. I think the problem is in the array of coordinates that receives for bound. When I run the API, the markers and the polylines are on site, but the map it'snot centered. Also I have an alert window to see the content of the array, and the result is the following:

(59.3,18.1),(59.9,10.8),(55.7,12.6), so the values are correct.

(function() {
window.onload = function() {

// Creating an object literal containing the properties 
// we want to pass to the map  
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.HYBRID,
noClear: true,
//GUI
panControl: true,
scaleControl: false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
mapTypeControl: true,
zoomControl: false,
};

var map = new google.maps.Map(document.getElementById('map'), options);

// JSON
    var json = [
        {
            "title": "Stockholm",
            "lat": 59.3,
            "lng": 18.1,
        },
        {
            "title": "Oslo",
            "lat": 59.9,
            "lng": 10.8,
        },
        {
            "title": "Copenhagen",
            "lat": 55.7,
            "lng": 12.6,
        }
    ]
    var arr = []; 
    // Loop the JSON
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
        // Create the waypoints
        latLng = new google.maps.LatLng(data.lat, data.lng);

        arr.push(latLng);

        // Create the markers
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: data.title
        });
        //Polylines
        var flightPath = new google.maps.Polyline({
            path: json,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2,
            map:map
        }); 
    }
    //  Fit these bounds to the map
    alert(arr);
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < arr.length; i++) {
        bounds.extend(arr[i].getPosition());
    }
    map.fitBounds(bounds);
   };  
   })();

Answers


I get the following javascript error with your code: Uncaught TypeError: arr[i].getPosition is not a function. A google.maps.LatLng doesn't have a .getPosition method.

proof of concept fiddle

code snippet:

(function() {
  window.onload = function() {

    // Creating an object literal containing the properties 
    // we want to pass to the map  
    var options = {
      zoom: 3,
      center: new google.maps.LatLng(37.09, -95.71),
      mapTypeId: google.maps.MapTypeId.HYBRID,
      noClear: true,
      //GUI
      panControl: true,
      scaleControl: false,
      streetViewControl: false,
      overviewMapControl: false,
      rotateControl: false,
      mapTypeControl: true,
      zoomControl: false,
    };

    var map = new google.maps.Map(document.getElementById('map'), options);

    // JSON
    var json = [{
      "title": "Stockholm",
      "lat": 59.3,
      "lng": 18.1,
    }, {
      "title": "Oslo",
      "lat": 59.9,
      "lng": 10.8,
    }, {
      "title": "Copenhagen",
      "lat": 55.7,
      "lng": 12.6,
    }]
    var arr = [];
    // Loop the JSON
    for (var i = 0, length = json.length; i < length; i++) {
      var data = json[i],
        // Create the waypoints
        latLng = new google.maps.LatLng(data.lat, data.lng);

      arr.push(latLng);

      // Create the markers
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: data.title
      });
      //Polylines
      var flightPath = new google.maps.Polyline({
        path: json,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });
    }
    //  Fit these bounds to the map
    // alert(arr);
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < arr.length; i++) {
      bounds.extend(arr[i]);
    }
    map.fitBounds(bounds);
  };
})();
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Your for loop is extending the bounds incorrectly. There isn't a getPosition() function for the latlon objects. Simply extend the bounds like so:

var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < arr.length; i++) {
    bounds.extend(arr[i]);
}

You can see it working in this JS Fiddle: https://jsfiddle.net/igor_9000/vhs6ppyg/

Hope that helps!


Need Your Help

Is Int32.ToString() culture-specific?

c# .net resharper cultureinfo

I'm running a beta version of ReSharper, and it's giving me warnings for the following code:

Drop items into specific group in a listview

.net vb.net listview drag-and-drop

I'm trying to drag an item between two Groups in the same ListView called 'listTasks'.