Wie kann man Google Maps dynamisch hochladen

Manchmal müssen Sie Google Maps dynamisch hochladen und wenn Sie es versuchen, stoßen Sie auf einige Probleme. Hier beschreiben wir, wie man Google Maps dynamisch hochladen kann.

Die Lösung ist: Sie können Ihre Map wie üblich einleiten, wie Sie es normalerweise tun, und Sie müssen diese Map unsichtbar machen.

<!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>

Jetzt machen wir die Karte unsichtbar und stellen sie mit dem CSS-Stil display: none ein. Dann werden wir eine Aktion durchführen, um die Karte von einem beliebigen Ereignis hochzuladen.

<!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()">Karte hochladen</button>
   </body>
</html>
Finden Sie das nützlich?

Ähnliche Artikel