Comment Charger Dynamiquement Google Maps (Plans)

De temps en temps on a besoin de charger dynamiquement Google Maps (Plans), mais quand on essaie de le faire, on a quelques problèmes et ne sait pas comment les fixer. Voilà un moyen de charger dynamiquement Google Maps.

La solution est la suivante: vous pouvez initier votre carte de manière simple, comme vous le faites habituellement et vous devez rendre cette carte invisible.

<!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA"></script>
      <script>
         function initialize() {
           var prop = {
            center:new google.maps.LatLng(51.508742,-0.120850),
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
           };
          var map=new google.maps.Map(document.getElementById("w3docs-map"), prop);
         }
         google.maps.event.addDomListener(window, 'load', initialize);
      </script>
   </head>
   <body>
      <div id="w3docs-map" style="width:500px;height:380px;"></div>
   </body>
</html>

Essayez-vous-même!

Maintenant, rendons la carte invisible, en y affichant le style de CSS display: none. Ensuite, nous allons effectuer une action pour charger la carte par n'importe quel événement.

<!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA"></script>
      <script>
         var map;
         function initialize() {
           var prop = {
            center:new google.maps.LatLng(51.508742,-0.120850),
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
           };
          return new google.maps.Map(document.getElementById("w3docs-map"), prop);
         }
         setTimeout(function(){
            map = initialize();
         },500);
         function w3Load(){
            document.getElementById("w3docs-map").style.display = 'block';
            google.maps.event.trigger(map, 'resize');
         }
      </script>
   </head>
   <body>
      <div id="w3docs-map" style="width:500px;height:380px;display: none"></div>
      <button onclick="w3Load()">Charger la Carte</button>
   </body>
</html>

Essayez-vous-même!