Platzieren von Google Street View und Google Maps mit nebeneinander liegenden Markierungspunkten

Question

Ich möchte das Street View-Fenster basierend auf einem Markierungspunkt von Google Maps nebeneinander platzieren. Hier ist der Code, den ich brauche Hilfe bei:

<div id="property_map"></div> 
      <script> 
       /* Property Detail Page - Google Map for Property Location */ 

       function initialize_property_map(){ 

        var propertyMarkerInfo = <?php echo json_encode($property_marker); ?> 

        var url = propertyMarkerInfo.icon; 
        var size = new google.maps.Size(42, 57); 

        // retina 
        if(window.devicePixelRatio > 1.5) { 
         if (propertyMarkerInfo.retinaIcon) { 
          url = propertyMarkerInfo.retinaIcon; 
          size = new google.maps.Size(83, 113); 
         } 
        } 

        var image = { 
         url: url, 
         size: size, 
         scaledSize: new google.maps.Size(42, 57), 
         origin: new google.maps.Point(0, 0), 
         anchor: new google.maps.Point(21, 56) 
        }; 

        var propertyLocation = new google.maps.LatLng(propertyMarkerInfo.lat, propertyMarkerInfo.lang); 
        var propertyMapOptions = { 
         center: propertyLocation, 
         zoom: 15, 
         mapTypeId: google.maps.MapTypeId.ROADMAP, 
         scrollwheel: false 
        }; 
        var propertyMap = new google.maps.Map(document.getElementById("property_map"), propertyMapOptions); 
        var propertyMarker = new google.maps.Marker({ 
         position: propertyLocation, 
         map: propertyMap, 
         icon: image 
        }); 
       } 

       window.onload = initialize_property_map(); 
      </script> 

Auf developers.google.com ich diesen Code gefunden für die Anzeige von Google Maps und Street View nebeneinander, und das ist etwas, was ich erreichen will, aber ich brauche, dies zu sein dynamisch und updates wenn ich den Markierungspunkt bewege.

Ich habe versucht, Code für Street View Panorama zu kopieren/einfügen, aber ohne Erfolg.Ich würde jede Hilfe mit diesem zu schätzen wissen.

UPDATE: ich diese zwei Codes in einer und das Ergebnis war zu kombinieren versucht, dass die Google Maps friert (mit Maus gezogen über werden kann nicht) und die Markierung wurde auch, Street View Fenster war leer, wie gut gegangen . Dies ist der Code, den ich versucht:

<div id="property_map"></div> 
      <div id="pano" style="float:left; height:100%; width:45%"></div> 
      <script> 
       /* Property Detail Page - Google Map for Property Location */ 

       function initialize_property_map(){ 

        var propertyMarkerInfo = <?php echo json_encode($property_marker); ?> 

        var url = propertyMarkerInfo.icon; 
        var size = new google.maps.Size(42, 57); 

        // retina 
        if(window.devicePixelRatio > 1.5) { 
         if (propertyMarkerInfo.retinaIcon) { 
          url = propertyMarkerInfo.retinaIcon; 
          size = new google.maps.Size(83, 113); 
         } 
        } 

        var image = { 
         url: url, 
         size: size, 
         scaledSize: new google.maps.Size(42, 57), 
         origin: new google.maps.Point(0, 0), 
         anchor: new google.maps.Point(21, 56) 
        }; 

        var propertyLocation = new google.maps.LatLng(propertyMarkerInfo.lat, propertyMarkerInfo.lang); 
        var propertyMapOptions = { 
         center: propertyLocation, 
         zoom: 15, 
         mapTypeId: google.maps.MapTypeId.ROADMAP, 
         scrollwheel: false 
        }; 
        var propertyMap = new google.maps.Map(document.getElementById("property_map"), propertyMapOptions); 
        var propertyMarker = new google.maps.Marker({ 
         position: propertyLocation, 
         map: propertyMap, 
         icon: image 
        }); 
        var panorama = new google.maps.StreetViewPanorama(
         document.getElementById('pano'), { 
         position: propertyLocation, 
         pov: { 
         heading: 34, 
         pitch: 10 
         } 
         }); 
         map.setStreetView(panorama); 

       } 

       window.onload = initialize_property_map(); 
      </script> 
      <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=IremovedmyAPI&callback=initialize"> 
</script> 

UPDATE: Sieht aus wie das Problem ist, dass ich zwei Funktionsaufrufe haben und ich brauche Hilfe diese in einem Aufruf zu drehen.

Answer 1

Sie haben einen Fehler in Ihrer Onload-Funktionsdefinition.

window.onload = initialize_property_map(); 

Sollte

window.onload = initialize_property_map; 

Die () sein, nachdem die Funktion bewirkt, dass es sofort ausgeführt werden soll, und der Rückgabewert als Funktion auszuführen „onload“, die da die Funktion nicht zurück null ist etwas.

Code-Schnipsel (und map.setStreetView(panorama); sollte propertyMap.setStreetView(panorama); sein):

function initialize_property_map() { 
 

 
    var propertyMarkerInfo = { 
 
    lat: 42.345573, 
 
    lang: -71.098326, 
 
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png" 
 
    }; 
 

 
    var url = propertyMarkerInfo.icon; 
 
    var size = new google.maps.Size(42, 57); 
 

 
    var image = { 
 
    url: url, 
 
    size: size, 
 
    scaledSize: new google.maps.Size(42, 57), 
 
    origin: new google.maps.Point(0, 0), 
 
    anchor: new google.maps.Point(21, 56) 
 
    }; 
 

 
    var propertyLocation = new google.maps.LatLng(propertyMarkerInfo.lat, propertyMarkerInfo.lang); 
 
    var propertyMapOptions = { 
 
    center: propertyLocation, 
 
    zoom: 15, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    scrollwheel: false 
 
    }; 
 
    var propertyMap = new google.maps.Map(document.getElementById("property_map"), propertyMapOptions); 
 
    var propertyMarker = new google.maps.Marker({ 
 
    position: propertyLocation, 
 
    map: propertyMap, 
 
    icon: image 
 
    }); 
 
    var panorama = new google.maps.StreetViewPanorama(
 
    document.getElementById('pano'), { 
 
     position: propertyLocation, 
 
     pov: { 
 
     heading: 34, 
 
     pitch: 10 
 
     } 
 
    }); 
 
    propertyMap.setStreetView(panorama); 
 

 
} 
 

 
window.onload = initialize_property_map;

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#property_map { 
 
    height: 100%; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
#pano { 
 
    height: 100%; 
 
    width: 50%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="property_map"></div> 
 
<div id="pano"></div>