Geek Answers Handbook

Google Map does not center even after resizing

OK, so I have a jQuery Dialog in the Google Maps v3 canvas. A dialog opens when you click on a link, and the map focuses on the marker that is associated with the link. Now everything works fine at first. the map is displayed and centered in relation to the marker position. When I close the dialog and click on another link. The map is displayed, but the marker is outside the map area, the well-known upper left corner. I need to drag the map a bit to display the marker. OK, so I added a few changes to the code and setCenter, but it still doesn't work.

What is going wrong ???

Here's the code for var map;

$(document).ready(function() { $("#map_container").dialog({ autoOpen : false, resizable : false, resizeStop : function(event, ui) { google.maps.event.trigger(map, 'resize') }, open : function(event, ui) { google.maps.event.trigger(map, 'resize'); }, close : function(event, ui) { map = null; } }); $(".show_on_map").click(function(e) { alert("click"); var lat = $(this).attr('lat'); var lng = $(this).attr('lng'); var placeName = $(this).attr('placeName'); var placeAddress = $(this).attr('placeAddress'); initialize(lat, lng); plotPoint(lat, lng, placeName, '<span class="gBubble"><b>' + placeName + '</b><br>' + placeAddress + '</span>'); $("#map_container").dialog("open"); }); function plotPoint(srcLat, srcLon, title, popUpContent, markerIcon) { var myLatlng = new google.maps.LatLng(srcLat, srcLon); var marker = new google.maps.Marker({ position : myLatlng, map : map, title : title, icon : markerIcon }); var infowindow = new google.maps.InfoWindow({ content : popUpContent }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); google.maps.event.trigger(map, 'resize'); map.setCenter(myLatlng); } function initialize(lat, lng) { var latlng = new google.maps.LatLng(lat, lng); var myOptions = { zoom : 13, center : latlng, mapTypeId : google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.trigger(map, 'resize'); map.setCenter(latlng); } </script>

Here is the div.

 <div id="map_container" style="width:300px;height:300px;"> <div id="map_canvas" style="width:250px;height:250px;"></div> </div>

Any help is appreciated. Koen

+4
source share
2 answers

You can try this sample code:

 lastCenter=map.getCenter(); google.maps.event.trigger(map_canvas, 'resize'); map.setCenter(lastCenter);
+19
source

In my case, I need to add a delay to make it work

 google.maps.event.trigger(map_canvas, "resize"); setTimeout(function() { map_canvas.setCenter(your_latlng); }, 100)
+1
source

More articles:


All Articles