API Google Maps ne centrant pas le marqueur

Question

J'ai Google Maps sur un site Web qui définit le marqueur en fonction d'une adresse.

Voici un exemple (cliquez sur l'onglet Emplacement): http://www.weddinghouse.com.au/wedding-directory/zoning-in-personal-training/

Comme vous pouvez le voir, il n'y a pas de marqueur sur la carte. Mais si vous faites défiler vers le haut le marqueur est assis juste hors de vue.

Y at-il un problème avec mon code? La chose étrange est très peu d'adresses montrent réellement correctement, mais la majorité ne le font pas. Y a-t-il un problème avec mon code ou est-ce Google?

Voici mon code JavaScript:

<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

Si vous chargez la page dans Google Maps, puis cliquez sur la fonction "lien", il vous donne le code pour intégrer la site comme un iFrame au lieu de déconner avec l'API, vous pouvez essayer cela?

Il y a aussi un bug avec ceci que parfois le marqueur n'est pas centré, particulièrement sur un div caché. Ma meilleure façon de surmonter cela est de mettre le iFrame de la carte google dans un fichier séparé (par exemple pages/map.html) et ensuite d'en faire la source de l'iFrame dans votre page.

EG- au lieu de iframe src = "maps.google.com/ etc etc" ont comme src = "pages/map.html"

Quoi qu'il en soit, ce poste est de 6 mois, mais mieux vaut tard que jamais!

Answer 2

Pour moi, le problème était l'iframe ayant la taille 0 (affichage: caché) quand la carte a été chargée. J'ai ajouté un délai pour charger la carte après l'iframe a été chargé. Cette condition de concurrence pourrait expliquer pourquoi certaines adresses ont été correctement affichées.

Peut-être essayer ceci:

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

(grâce à https://groups.google.com/forum/#!topic/google-maps-api/nN0y2pSr2dQ)