Google Maps API v3 de Chargement Seulement Après rafraichissement de la Page

Je suis de bidouiller avec l'API Google Maps pour une page web, je travaille sur. Mon problème actuellement est, la carte des charges exactement comme j'en avais l'intention, mais seulement après l'actualisation de la page. Si je ne suis pas d'actualiser la page, tout ce que je vois est la toile. Le problème reste, si je quitte la page et de revenir si il semble être un problème avec l'appel pour la carte de initialize.

Le code:

<style>
#map_canvas {
width: 670px;
height: 400px;
background-color: #CCC;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(31.247681, 121.449504);
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(31.248195, 121.447431),
zoom: 16,
mapTypeControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var contentString =
'<b>Leung Gallery</b>' +
'<p>50 Moganshan Rd. Building 7, Unit 108, Shanghai</p>' +
'<p>&#19978;&#28023;&#26222;&#38464;&#21306;&#33707;&#24178;&#23665;&#36335;50&#21495;7&#21495;&#27004;108&#23460;</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
google.maps.event.trigger(map, 'resize');
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>​

La navigation à travers les questions précédentes, je n'ai rien trouvé qui correspondait à mon problème exactement, mais j'ai vu des situations semblables qui tournait autour de google.maps.event.addDomListener(window, 'load', initialize); donc je pense que peut-être où est la question. Toute aide est appréciée.

Edit: j'Ai pointé dans la bonne direction. L'ajout de $(document).bind("projectLoadComplete", initialize); après google.maps.event.addDomListener(window, 'load', initialize); résout le problème. Le problème est que les pages ne sont pas entièrement de chargement lors de l'utilisation de la navigation. Ce problème est probablement exclusif à la Cargaison plateforme Collective.

Son chargement comme prévu découvrez ce violon..jsbin.com/ofutUbA/1/edit
Travail parfait...
pourrait-il peut-être l'environnement, je suis en utilisant ce? je suis en train de construire ma page web à l'aide de fret collective. pas sûr si peut-être qui a une influence sur les raisons de la carte initialise seulement APRÈS l'actualisation de la page.
k dans le code où est-ce que le code du script dans la section d'en-tête ou après le corps comme dans mon code violon..
Si quelqu'un souhaite prendre un coup d'oeil à la question à portée de main, c'est sur cette page

OriginalL'auteur Darryl Leung | 2013-10-29

  1. 4

    Il semble bien fonctionner pour moi sous Firefox, mais pas dans Internet Exploder. Dans IE premier affichage de la page, la carte ne se charge pas. Je suis assez certain qu'il a à voir avec la façon dont la page est en cours de construction. Quand je l'affichage de la source dans IE et faites une recherche sur le texte "map_canvas" (qui est l'id de votre div pour l'affichage de la carte) je ne suis pas en mesure de trouver un div ou n'importe quel élément html avec cet id dans le raw source de la page pour une raison, et je n'ai pas réellement compris comment il est ajouté à la page. Mais, la div ne présentent que dans les Outils de Développeur comme un vide de l'élément xml: <div id="map_canvas" /> qui suite à l'actualisation de la page qu'il se remplit. Cela me mène à croire que, quelle que soit d'autres codes qui doivent être en ajoutant que la div de la page dynamiquement c'est de courir après votre carte de script d'initialisation. Donc, si vous avez la possibilité de déplacer votre initialiser la carte de script, le meilleur endroit pour le mettre, il serait immédiatement avant la fermeture </body> tag. Si ça ne fonctionne toujours pas correctement, vous pouvez essayer de retarder votre initialiser le script d'exécution même un peu plus, essayez:

    google.maps.event.addDomListener(
window,
'load',
function () {
//1000 milliseconds == 1 second,
//play with this til find a happy minimum delay amount
window.setTimeout(initialize, 1000);
}
);
    J'ai juste tenté de modifier la partie du script et, pour un moment, je pensais que cela a fonctionné. J'ai été en mesure d'utiliser la navigation pour se rendre à la page à propos et il s'est chargé correctement. Cependant, je n'ai pas pu reproduire les résultats. J'ai aussi essayé d'insérer le script dans la, ce qui je suppose est la partie du corps de l'HTML. Cela ne fonctionne pas. Cet article accepte le HTML (div par exemple), je suis en utilisant Cargo Collective que ma plate-forme, donc je suis assez limité quant à la façon dont je peux modifier le code HTML.

    OriginalL'auteur astupidname

  2. 3

    Après plusieurs heures de recherche infructueuse d'une solution enfin j'ai trouvé ceci:

    Il suffit de remplacer:

    google.maps.event.addDomListener(window, 'load', initialize);

    avec:

    $(document).ready(function(){
initialize();
});

    OriginalL'auteur mmauzerr

  3. 2

    Suis pointé dans la bonne direction. L'ajout de $(document).bind("projectLoadComplete", initialize); après google.maps.event.addDomListener(window, 'load', initialize); résout le problème. Le problème est que les pages ne sont pas entièrement rechargement lors de l'utilisation de la navigation. Ce problème est probablement exclusif à la Cargaison plateforme Collective. Je devine que c'est une décision qu'ils ont prise pour faire les transitions de page plus rapide.

    OriginalL'auteur Darryl Leung

  4. 2

    De l'API de la version 3 appel 

    google.maps.event.trigger(map, 'resize')

    ou pour la version 2

    map.checkResize()

    Assurez-vous que vous appelez google.maps.event.trigger(map, 'resize') AVANT appel map.fitBounds() ou vous obtiendrez des résultats inattendus.

    Cette v3 version a fonctionné pour moi.

    OriginalL'auteur umer

  5. 1

    J'ai vérifié ce et sa fonctionne très bien pour moi. Veuillez commander la fiddle http://jsfiddle.net/aCx6L/

    OriginalL'auteur Marikkani Chelladurai

  6. 0

    Après avoir essayé diverses suggestions et échoué, j'ai trouvé que la suite fonctionne pour moi:

    try {google;} catch (e){location.reload();}

    Vous devez ajouter ce juste avant la création de la carte.

    Je sais que cela peut ne pas être la meilleure solution car elle engage une charge supplémentaire sur le serveur.

    J'ai aussi découvert que la carte peut charger correctement la première fois dans Internet Explorer Le Bord, mais pas dans Google Chrome.

    OriginalL'auteur Chong Lip Phang