Making my google-map fitBounds

Question

I basically want to create maps which zoom in to the size corresponding to the SE-NW corners. I have tried so many variations but have not been able to get it to work. I managed to place two markers on one version of my script but was not able to make the map zoom in to the size of the markers. I don't need markers, I was just thinking outside the box. I will include my sort of working script below but would appreciate any help with making the fitBounds to work. I have worked solidly on this for two days, but I am not a programmer so much of the solutions I have found on this website and others don't quite make sense, or they don't address my exact problem.

<!DOCTYPE html>
<!-- This script works, but the size of the output should be as per the SW-NE coordinates -- not the 'div style width/height', and ignoring the center:coordinates -->
<!-- This is one of several maps I am planning to create but I don't mind typing in the fitBounds coordinates by hand -->
<html>
<head>
<title>Google Road Maps</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(56.3,4.3),
    zoom:8,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    disableDefaultUI:true,     
    scaleControl: true
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);

var fitBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(53.3,-0.7), 
  new google.maps.LatLng(59.3,9.3)
);
</script>
</head>
<body>
<div id="googleMap" style="width:600mm;height:600mm;"></div>
</body>
</html>

score 0 · Answer 1 · answered Nov 09 '16 at 14:12

You need to call Map.fitBounds with your fitBounds object.

map.fitBounds(fitBounds);

proof of concept fiddle

code snippet:

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(56.3, 4.3),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    scaleControl: true
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  map.fitBounds(fitBounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
var fitBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(53.3, -0.7),
  new google.maps.LatLng(59.3, 9.3)
);

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>

Making my google-map fitBounds

1 Answers1