2017-03-10 2 views
0

mit PHP & MYSQL auf WordPress und Google Map API, um Daten aus MYSQL-Datenbank abrufen und Markierungen mit Info-Fenstern auf Google Map anzeigen hinzufügen.wie man Infofenster und Marker auf Google Map

Das Problem ist, dass ich nicht innerhalb der InfoWindow die abgerufenen Daten aus der Datenbank als die siteID WHERE es ist ein Feld in der ausgewählten Tabelle angezeigt werden kann.

die folgenden Code-Markierungen verwendet werden nicht auf der Karte zeigt

Code:

<?php 
     /* 
     Template Name: MAP2 
     */ 

     get_header(); 
    ?> 


<!DOCTYPE html> 
<html> 
    <head> 
    <title>Custom Markers</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCquey2tCZ32jLJJDEEi2D7_RnXXyj9RTI&callback=initMap"> 
    </script> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 600px; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 

    </head> 
    <body> 
    <div id="map"></div> 

    <script> 

    var map,currentPopup; 
     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 8, 
      center: new google.maps.LatLng(33.888630, 35.495480), 
      mapTypeId: 'roadmap' 
     }); 

     var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
     var icons = { 
      parking: { 
      icon: iconBase + 'parking_lot_maps.png' 
      }, 
      library: { 
      icon: iconBase + 'library_maps.png' 
      }, 
      info: { 
      icon: iconBase + 'info-i_maps.png' 
      } 
     }; 




     function addMarker(feature) { 
      var marker = new google.maps.Marker({ 
      position: feature.position, 

      //icon: icons[feature.type].icon, 
      map: map 
      }); 

      var popup = new google.maps.InfoWindow({ 
        // content: feature.position.toString(), 
// this line that makes the error 
       content: feature.info, 
        maxWidth: 300 
       }); 

      google.maps.event.addListener(marker, "click", function() { 
        if (currentPopup != null) { 
         currentPopup.close(); 
         currentPopup = null; 
        } 
        popup.open(map, marker); 
        currentPopup = popup; 
       }); 
       google.maps.event.addListener(popup, "closeclick", function() { 
        map.panTo(center); 
        currentPopup = null; 
       }); 
     } 



     var features = [ 
     <?php 
      global $wpdb; 
      $prependStr =""; 
      foreach($wpdb->get_results("SELECT siteID, latitude, longitude FROM site_coordinates2", OBJECT) as $key => $row) { 
       $latitude = $row->latitude; 
       $longitude = $row->longitude; 
       $info = $row->siteID; 
      echo $prependStr; 
     ?> 
{ 
    position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>), 
    info:(<?php echo $info;?>), 

} 
<?php 
$prependStr =","; 
} 
?> 
     ]; 



     for (var i = 0, feature; feature = features[i]; i++) { 

      addMarker(feature); 
     } 
} 



     </script> 


    </body> 
</html> 

<?php 
get_footer(); 
?> 
+0

Ersetzen Sie runde Klammern mit einem einfachen Angebot gegen Info-Parameter. Vielen Dank. – user1544541

+0

erhalten Sie Koordinaten (Breitengrad, Längengrad) von Query? – user1544541

+0

@ user1544541 ja deine antwort funktioniert danke –

Antwort

0

runde Klammern mit Apostroph gegen info Parameter ersetzen. Vielen Dank.

+0

wie man dieses Symbol anstelle von normalen Markierungen erscheint ?? ich habe symbole aber auch nichts wird angezeigt wie das benötigte icon –

+0

bitte ausarbeiten. Vielen Dank. – user1544541

+0

Ich möchte Symbole anstelle von normalen Markierungen haben, wie man es im Code macht ?? Javascript oder PHP? –

Verwandte Themen