Anzeigen mehrerer Google Maps auf einer Seite mit verschiedenen Markersätzen

Question

Ich verwende das Google Maps-API, um zwei Google Maps auf einer einzelnen Seite anzuzeigen - beiden sind individuelle Markierungen zugewiesen. Die Markierungen werden dynamisch aus verschiedenen benutzerdefinierten Post-Typen im Kopf generiert.

Ich habe es geschafft, eine Karte zu bekommen, die okay mit den Markierungen angezeigt wird, aber ich kann nicht scheinen, andere Karte zu arbeiten. Ich habe versucht, separate Variablen für die verschiedenen Karten wie unten hinzuzufügen, aber immer noch nichts.

Kann jemand helfen?

<script type="text/javascript"> 
       var locations = [ 
        <?php $i = 1; while (have_posts()) : the_post(); ?> 
         <?php $location = get_post_meta(get_the_ID(), 'rsl_latitude', true); if($location) { ?> 
          { 
           latlng : new google.maps.LatLng(<?php echo get_post_meta(get_the_ID(), 'rsl_latitude', true); ?>, <?php echo get_post_meta(get_the_ID(), 'rsl_longitude', true); ?>), 
           info : document.getElementById('item<?php echo $i; ?>') 
         }, 

        <?php } else {} $i++; endwhile; ?> 
       ]; 
      </script> 

     <?php else : ?> 
      <!-- No matching posts, show an error --> 
      <h1>Error 404 &mdash; Page not found.</h1> 
     <?php endif; ?> 



    <script type="text/javascript"> 
       var inthearea = [ 

     <?php $inthearea = types_child_posts("in-the-area"); 


       foreach ($inthearea as $area) { ?> 

       <?php 

       $location = get_field('location', $area->ID); 
       $areacat = get_field('area_category', $area->ID); 

       ?> 

       <?php $i = 1 ?> 
        { 
         latlng : new google.maps.LatLng(<?php echo $location['lat'];?>, <?php echo $location['lng'];?>), 

         info : document.getElementById('item<?php echo $i; ?>') 
        }, 

       <?php $i++; } ?> 
       { 
         latlng : new google.maps.LatLng(<?php echo get_post_meta(get_the_ID(), 'rsl_latitude', true); ?>, <?php echo get_post_meta(get_the_ID(), 'rsl_longitude', true); ?>), 
         info : document.getElementById('item<?php echo $i; ?>') 
          }, 

    ]; 


       </script> 



    var infowindow = new google.maps.InfoWindow(); 


function initialize() { 
    map = new google.maps.Map(document.getElementById('map1'), { 
     zoom: 12, 
     center: new google.maps.LatLng(38.898748, -77.037684), 
     scrollwheel: false , 
     styles: [ 
     { 
      "featureType": "administrative", 
      "elementType": "labels.text.fill", 
      "stylers": [ 
       { 
        "color": "#245e7c" 
       } 
      ] 
     }, 
     { 
      "featureType": "landscape", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "color": "#f2f2f2" 
       } 
      ] 
     }, 
     { 
      "featureType": "poi", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "visibility": "off" 
       } 
      ] 
     }, 
     { 
      "featureType": "road", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "saturation": -100 
       }, 
       { 
        "lightness": 45 
       } 
      ] 
     }, 
     { 
      "featureType": "road.highway", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "visibility": "simplified" 
       } 
      ] 
     }, 
     { 
      "featureType": "road.arterial", 
      "elementType": "labels.icon", 
      "stylers": [ 
       { 
        "visibility": "off" 
       } 
      ] 
     }, 
     { 
      "featureType": "transit", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "visibility": "off" 
       } 
      ] 
     }, 
     { 
      "featureType": "water", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "color": "#d8dbdc" 
       }, 
       { 
        "visibility": "on" 
       } 
      ] 
     } 
    ] 
    }); 


    var latlngbounds = new google.maps.LatLngBounds(); 

    for (var i = 0; i < locations.length; i++) { 
     var marker = new google.maps.Marker({ 
      position: locations[i].latlng, 
      map: map, 
      icon: 'https://rslcloud.co.uk/wp-content/themes/rsl-theme/img/map-markerv2.png' 
     }); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
      infowindow.setContent(locations[i].info); 
      infowindow.open(map, marker); 
      } 
     })(marker, i)); 

     latlngbounds.extend(marker.position); 


     //Center map and adjust Zoom based on the position of all markers. 
     if (latlngbounds.getNorthEast().equals(latlngbounds.getSouthWest())) { 
    var extendPoint = new google.maps.LatLng(latlngbounds.getNorthEast().lat() + 0.01, latlngbounds.getNorthEast().lng() + 0.01); 
    latlngbounds.extend(extendPoint); 
} 
map.fitBounds(latlngbounds); 
     map.setCenter(latlngbounds.getCenter()); 

    } 
} 

map2 = new google.maps.Map(document.getElementById('map2'), { 
     zoom: 12, 
     center: new google.maps.LatLng(38.898748, -77.037684), 
     scrollwheel: false , 
     styles: [ 
     { 
      "featureType": "administrative", 
      "elementType": "labels.text.fill", 
      "stylers": [ 
       { 
        "color": "#245e7c" 
       } 
      ] 
     }, 
     { 
      "featureType": "landscape", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "color": "#f2f2f2" 
       } 
      ] 
     }, 
     { 
      "featureType": "poi", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "visibility": "off" 
       } 
      ] 
     }, 
     { 
      "featureType": "road", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "saturation": -100 
       }, 
       { 
        "lightness": 45 
       } 
      ] 
     }, 
     { 
      "featureType": "road.highway", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "visibility": "simplified" 
       } 
      ] 
     }, 
     { 
      "featureType": "road.arterial", 
      "elementType": "labels.icon", 
      "stylers": [ 
       { 
        "visibility": "off" 
       } 
      ] 
     }, 
     { 
      "featureType": "transit", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "visibility": "off" 
       } 
      ] 
     }, 
     { 
      "featureType": "water", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "color": "#d8dbdc" 
       }, 
       { 
        "visibility": "on" 
       } 
      ] 
     } 
    ] 
    }); 


    var latlngbounds = new google.maps.LatLngBounds(); 

    for (var i = 0; i < inthearea.length; i++) { 
     var marker = new google.maps.Marker({ 
      position: inthearea[i].latlng, 
      map: map2, 
      icon: 'https://rslcloud.co.uk/wp-content/themes/rsl-theme/img/map-markerv2.png' 
     }); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
      infowindow.setContent(inthearea[i].info); 
      infowindow.open(map2, marker); 
      } 
     })(marker, i)); 

     latlngbounds.extend(marker.position); 


     //Center map and adjust Zoom based on the position of all markers. 
     if (latlngbounds.getNorthEast().equals(latlngbounds.getSouthWest())) { 
    var extendPoint = new google.maps.LatLng(latlngbounds.getNorthEast().lat() + 0.01, latlngbounds.getNorthEast().lng() + 0.01); 
    latlngbounds.extend(extendPoint); 
} 
map.fitBounds(latlngbounds); 
     map.setCenter(latlngbounds.getCenter()); 

    } 



initialize(); 

Answer 1

dies ist nur ein Vorschlag .. und keine richtige Antwort si nicht einfach tun dies in Kommentar so

atte Ende Sie codieren Sie haben einen Verweis auf

map.fitBounds(latlngbounds); 
    map.setCenter(latlngbounds.getCenter()); 

} 

initialize(); 

sollte sein

dann könnten Sie einige andere msmatching map/map2 Zuordnung, die Probleme oder wr erstellen ong Verhalten