Javascript 将谷歌街景和谷歌地图与标记点并排放置

我想根据谷歌地图上的标记点并排放置街景窗口。以下是我需要帮助的代码：

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

/*物业详细信息页面-物业位置的谷歌地图*/
函数初始化\u属性\u映射（）{
var propertyMarkerInfo=
var url=propertyMarkerInfo.icon；
var size=newgoogle.maps.size（42,57）；
//视网膜
如果（window.devicePixelRatio>1.5）{
if（propertyMarkerInfo.retinaIcon）{
url=propertyMarkerInfo.retinaIcon；
size=newgoogle.maps.size（83113）；
}
}
变量图像={
url:url，
尺寸：尺寸，
scaledSize：新的google.maps.Size（42,57），
来源：新google.maps.Point（0,0），
主播：新谷歌地图点（21,56）
};
var propertyLocation=new google.maps.LatLng（propertyMarkerInfo.lat，propertyMarkerInfo.lang）；
var PropertyPoptions={
中心：物业定位，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误
};
var propertyMap=new google.maps.Map（document.getElementById（“property_-Map”），propertymaptions）；
var propertyMarker=new google.maps.Marker({
职位：物业定位，
地图：propertyMap，
图标：图像
});
}
window.onload=initialize_property_map（）；

在developers.google.com上，我发现这段代码用于并排显示谷歌地图和街景，这是我想要实现的，但我需要它是动态的，并在移动标记点时进行更新

<div id="map"></div>
<div id="pano"></div>
<script>

  function initialize() {
    var fenway = {lat: 42.345573, lng: -71.098326};
    var map = new google.maps.Map(document.getElementById('map'), {
      center: fenway,
      zoom: 14
    });
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: fenway,
          pov: {
            heading: 34,
            pitch: 10
          }
        });
    map.setStreetView(panorama);
  }
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>

函数初始化（）{
var fenway={lat:42.345573，lng:-71.098326}；
var map=new google.maps.map（document.getElementById（'map'）{
中心：芬威，
缩放：14
});
var panorama=新建google.maps.StreetViewPanorama(
document.getElementById（'pano'）{
位置：芬威，
pov：{
标题：34，
投球：10
}
});
地图设置树视图（全景）；
}

我试图复制/粘贴一段负责街景全景的代码，但没有成功。我非常感谢您的帮助

更新： 我试图将这两个代码组合在一起，结果是谷歌地图冻结（不能用鼠标拖动），标记也不见了，街景窗口也是空白的。这是我尝试的代码：

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

/*物业详细信息页面-物业位置的谷歌地图*/
函数初始化\u属性\u映射（）{
var propertyMarkerInfo=
var url=propertyMarkerInfo.icon；
var size=newgoogle.maps.size（42,57）；
//视网膜
如果（window.devicePixelRatio>1.5）{
if（propertyMarkerInfo.retinaIcon）{
url=propertyMarkerInfo.retinaIcon；
size=newgoogle.maps.size（83113）；
}
}
变量图像={
url:url，
尺寸：尺寸，
scaledSize：新的google.maps.Size（42,57），
来源：新google.maps.Point（0,0），
主播：新谷歌地图点（21,56）
};
var propertyLocation=new google.maps.LatLng（propertyMarkerInfo.lat，propertyMarkerInfo.lang）；
var PropertyPoptions={
中心：物业定位，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误
};
var propertyMap=new google.maps.Map（document.getElementById（“property_-Map”），propertymaptions）；
var propertyMarker=new google.maps.Marker({
职位：物业定位，
地图：propertyMap，
图标：图像
});
var panorama=新建google.maps.StreetViewPanorama(
document.getElementById（'pano'）{
职位：物业定位，
pov：{
标题：34，
投球：10
}
});
地图设置树视图（全景）；
}
window.onload=initialize_property_map（）；

---

更新：问题似乎在于我有两个函数调用，我需要帮助将其转换为一个调用

您的onload函数定义中有一个错误

window.onload = initialize_property_map();

应该是

window.onload = initialize_property_map;

函数后的

（）

会导致立即执行它，返回值用作函数执行“onload”，该值为null，因为函数不返回任何内容

（和

map.setStreetView（全景）；

应该是

propertyMap.setStreetView（全景）；

）

代码片段：

函数初始化属性映射（）{
var propertyMarkerInfo={
纬度：42.345573，
朗：-71.098326，
图标：“http://maps.google.com/mapfiles