FitBounds doesnt work in googlemaps javascript

Question

I have a map and a list of markers, each of which has a position in LatLng object. The position is valid because i can see the markers on the map. However i want to fit the map to the markers so i use the proper syntax as below. However the map never zooms and centers in those two positions. Instead it load in the initial center,zoom that i config in the initMap. Can anybody identify the problem please???

var bounds = new google.maps.LatLngBounds();
var location = new google.maps.LatLng(25.36234, 15.3623);
var location2 = new google.maps.LatLng(38.2352, 12.36435);
bounds.extend(location2);
bounds.extend(location);
window.parent.map.fitBounds(bounds);
window.parent.map.setCenter(bounds.getCenter());

What is `window.parent.map`? Please provide a [mcve] that demonstrates your issue (if I replace those with `map` from [Google's Simple Map example](https://developers.google.com/maps/documentation/javascript/examples/map-simple) it works ([fiddle](https://jsfiddle.net/geocodezip/8d51bmet/4/))) — geocodezip, Aug 07 '19 at 12:53

score 3 · Answer 1 · answered Aug 07 '19 at 12:56

3

window.parent.map seems a bit odd of a solution for your problem.
This should solve your problem.

var map;

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: new google.maps.LatLng(39.5473234, 35.3796685),
    mapTypeId: 'roadmap'
  });


  var bounds = new google.maps.LatLngBounds();
  var location = new google.maps.LatLng(25.36234, 15.3623);
  var location2 = new google.maps.LatLng(38.2352, 12.36435);
  bounds.extend(location2);
  bounds.extend(location);
  map.fitBounds(bounds);
  map.setCenter(bounds.getCenter());

answered Aug 07 '19 at 12:56

oividiosCaeremos

608
1
10
30

window.parent.map is set like that because the js where my code is written is in a child Frame and the map is defined in the Parent Frame. – james04 Aug 28 '19 at 11:39
How do you declare the map? Embedded maps work with a Google Maps URL. However if you only want for map to display specific data, you can generate a map from [link](https://www.mapsdirections.info/en/custom-google-maps/) – oividiosCaeremos Aug 28 '19 at 12:41
Declare the map is like in the code above. var map. Well this is written in a jsp of the parent frame and the code that i want to put the bounds is in a js of a child frame jsp. I have checked it...window.parent.map work fine!! – james04 Aug 28 '19 at 12:45
Can you do my way with just giving your iframe an "id"? If there's no cross-origin error, it should work in theory. – oividiosCaeremos Aug 28 '19 at 13:33
I finally solved it. The problem was that by the time i was adding markers to the map the map DIV was style: none. – james04 Sep 12 '19 at 11:42

FitBounds doesnt work in googlemaps javascript

1 Answers1