Google Maps API does not center marker

Question

I have Google Maps on a website that sets a marker based on an address.

Here is an example (click the location tab): http://www.weddinghouse.com.au/wedding-directory/zoning-in-personal-training/

As you can see, there is no marker on the map. But if you scroll up, the marker sits just out of sight.

Is there something wrong with my code? It is strange that very few addresses really show correctly, but most do not. Is something wrong with my code or is it Google?

Here is my JavaScript code:

<script type="text/javascript"> $(document).ready(function(){ load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806'); }); </script> 

-

 function load(title, address, type) { if (GBrowserIsCompatible()) { var map; var geocoder; map_id = document.getElementById("map"); map = new GMap2(map_id); map.addControl(new GSmallMapControl()); map.setCenter(new GLatLng(24, 0), 17); map.enableDoubleClickZoom(); if (type == 'sat') { map.setMapType(G_SATELLITE_MAP); map.addControl(new GHierarchicalMapTypeControl()); } else { map.setMapType(G_NORMAL_MAP); } geocoder = new GClientGeocoder(); geocoder.getLocations(address, function (response) { map.clearOverlays(); if (!response || response.Status.code != 200) { //map_id.innerHTML('Could not find address on Google Maps'); } else { place = response.Placemark[0]; point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); map.setCenter(point, 17); // Create our "tiny" marker icon var icon = new GIcon(); icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); // Creates one of our tiny markers at the given point function createMarker(point, index) { var marker = new GMarker(point, icon); var myMarkerContent = "<div style=\"width:200px; overflow:auto;\"><strong>" + title + "</strong><br />" + address + "</div>"; map.addOverlay(marker); marker.openInfoWindowHtml(myMarkerContent); GEvent.addListener(marker,"click",function() { marker.openInfoWindowHtml(myMarkerContent); }); } createMarker(point); } }); } } 

Answer 1

If you load the page into Google maps and then click on the link function, it gives you the code to embed the site as an iFrame instead of messing with the API, can you try this?

There is also an error that sometimes the marker is not centered, especially on a hidden div. My best way to get around this is to put the iFrame on the google map in a separate file (e.g. pages / map.html) and then make it an iFrame source on your page.

For example, instead of iFrame src = "maps.google.com/etc etc." use it as src = "pages / map.html"

In any case, this post is 6 months old, but better late than never!

Answer 2

For me, the problem was that the iframe had size 0 (display: hidden) when loading the map. I added a delay to load the map after loading the iframe. This race condition may explain why some of the addresses were made correctly.

Perhaps try the following:

 <script type="text/javascript"> $(document).ready(function(){ setTimeout("delayedLoad()",100); }); function delayedLoad() { load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806'); } </script> 

(thanks https://groups.google.com/forum/#!topic/google-maps-api/nN0y2pSr2dQ )