The ID of your div ("map-canvas") in <div id="map-canvas" style="width: 100%; height: 100%"></div>
does not match the id you indicate in your script: map = new google.maps.Map(document.getElementById("**map_canvas**"), myOptions);
Also in the jsfiddle you provided, you need to select no wrap - <in body>
instead of onLoad
in the second dropdown on the left menu because you're calling your initialize()
function in the onLoad of the body.
Update: indeed, I forgot about the markers. First the function addMarkers()
wasn't called from initialize()
. Also let's not forget to send the "map" as a parameter so we can use it in addMarkers
.
Finally getBounds is available after the event bounds_changed
is fired, we just need to add a listener on it to get the values.
Here is a jsfiddle that works: http://jsfiddle.net/M2RD6/4/