Google Maps API not centering the Marker

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

Here's 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 upwards the marker is sitting just out of view.

Is there something wrong with my code? The weird thing is very few addresses actually show correctly but the majority don't. Is there 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开发者_JS百科, 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);
            }
        });
    }
}

If you load the page in google maps and then click on the "link" function, it gives you code to embed the site as an iFrame instead of messing about with the API- you could try this?

There is also a bug with this that sometimes the marker is not centered, particularly on a hidden div. My best way to overcome this is to put the iFrame of the google map in a separate file (e.g. pages/map.html) and then to make that the source of the iFrame in your page.

E.g.- instead of iFrame src="maps.google.com/ etc etc" have it as src="pages/map.html"

Anyway, this post is 6 months old but better late than never!

For me, the problem was the iframe having size 0 (display:hidden) when the map was loaded. I added a delay to load the map after the iframe was loaded. This race condition could explain why some of the addresses rendered correctly.

Perhaps try this:

<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 to https://groups.google.com/forum/#!topic/google-maps-api/nN0y2pSr2dQ)