1. Zuhause
  2. Frage und Antwort
  3. Google Maps API leere Ausgabe

Google Maps API leere Ausgabe

2016-07-07 16 views
0

ich eine Seite, mit einem Satz (40+) benutzerdefinierte Markierungen gesetzt auf der Seite, (dies ist eine Sanierung eines bestehenden Systems (aber schlecht codiert).Google Maps API leere Ausgabe

Google Map Ausgabe anzuzeigen Mein Problem ist, dass die Karte nicht ausgegeben wird, es gibt keinen Inhalt innerhalb der <div id='map'>. Es gibt keine Fehler auf den Browserkonsolen, also bin ich ein bisschen ein Verlust, wie man dieses Problem angehen kann.

Ich habe verschiedene auskommentiert Teile meines Codes (wie Marker Platzierung), aber das scheint auch nicht zu beheben.

Page code:

<!DOCTYPE html> 
<head> 

<script type="text/javascript"> 
     function initMap() { 
      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 11, 
     /*  mapTypeId: google.maps.MapTypeId.ROADMAP,*/ 
       center: {lat: 52.345617, lng: 1.502666} 
      }); 

     /** setMarkers(map);**/ 

     /*** 
      infowindow = new google.maps.InfoWindow({ 
       content: "holding..." 
      });**/ 
     } 

     /*** map still loads blank even when commenting all the below JS **/ 
     /*** 
     var places = [ 
      // Name | lat | long | order | infoWindowDescr 
      ['Dud Data', 52.3283777, 1.6753005, 12, 'some descriptive text'] 
      <?php 
      //this PHP is a working Javascript array of marker data 
      // disabled for testing but seems ok. 
      //print $placesOutput; 
      ?> 
     ]; 

     function setMarkers(map) { 
      // Adds markers to the map. 

      for (var i = 0; i < places.length; i++) { 
       var business = places[i]; 

       var marker = new google.maps.Marker({ 
        title: business[0], 
        position: {lat: business[1], lng: business[2]}, 
        map: map, 
        zIndex: business[3] 
       }); 
       google.maps.event.addListener(places, 'click', function(){ 
        infowindow.setContent(business[4]); 
        infowindow.open(map, this); 
       }) 
      } 
     } 
     **/ 
    </script> 
    <script type="text/javascript" defer async 
      src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap"> 
    </script> 
</head> 

<body> 
    <div id='map' style='height:500px;width:500px;'></div> 
</body> 
</html>

Was ich bisher versucht habe:

Der Quellcode ist von den Google-Entwickler docs here und verschiedenen verwandten Google-Seiten. Code für die Mehrfachmarkierungen info window stammte von einer anderen Seite.

Ich habe this question, this question und this question lesen - die dritte Frage hat mich meinen Code neu zu ordnen, so dass der Verweis auf die API wurden nach die Funktionen etabliert kam.

  • Ich habe NO Fehler in Konsolen auf Browsern (Firefox/Chrome); Ich habe anscheinend keine JavaScript-Fehler.

  • Ich teste gerade ohne PHP Daten so Frage 2 würde hier nicht gelten.

  • Mein API-Schlüssel funktioniert ordnungsgemäß.

  • Ich habe versucht, den Javascript-Code neu zu ordnen sowie den Code vor/nach dem DIV-Element zu platzieren, aber keine Änderung.

  • Die Deaktivierung des Arrays places, setMarker und infoWindow funktioniert auch nicht.

  • Es gibt kein anderes Javascript auf der Seite.

Ich bin sicher, es ist etwas einfach, aber ich kann es nicht sehen ....

Quelle

2016-07-07 Martin

+0

Wahrscheinlich wird Ihre 'initMap' -Funktion aufgerufen, bevor das' # map' -Element existiert. Wenn Sie Ihre '

Verwandte Themen

 Verwandte Themen