Google StreetView/Maps API

Question

Я пытаюсь наложить маркер на Google Street View. Я могу получить маркер на карте Google, но он не отображается в GSV.

https://jsfiddle.net/gnxnm4nt/

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
    <script> 
function initialize() { 
    var baltimore = new google.maps.LatLng(39.283024, -76.601765); 
    var baltimore1 = new google.maps.LatLng(39.283223, -76.601851); 


    var mapOptions = { 
    center: baltimore, 
    zoom: 14 
    }; 
    var map = new google.maps.Map(
     document.getElementById('map-canvas'), mapOptions); 
    var cafeMarker = new google.maps.Marker({ 
     position: baltimore1, 
     map: map, 
     icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', 
     title: 'Cafe' 
    }); 
    var panoramaOptions = { 
    position: baltimore, 
    pov: { 
     heading: 34, 
     pitch: 10 
    } 
    }; 
    var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions); 
    map.setStreetView(panorama); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 

API Reference: https://developers.google.com/maps/documentation/javascript/examples/streetview-overlays https://developers.google.com/maps/documentation/javascript/examples/streetview-embed

Спасибо! Пожалуйста, проверьте мою скрипку за то, что у меня есть. Это должен быть маркер, который появляется на кольцевой развязке.

Answer 1

Вы также должны добавить маркер к уличному просмотру (и другой от того, который находится на карте).

var cafeMarker2 = new google.maps.Marker({ 
    position: baltimore1, 
    map: panorama, 
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', 
    title: 'Cafe' 
}); 

updated fiddle

фрагмент кода:

function initialize() { 
 
    var baltimore = new google.maps.LatLng(39.283024, -76.601765); 
 
    var baltimore1 = new google.maps.LatLng(39.283223, -76.601851); 
 

 

 
    var mapOptions = { 
 
    center: baltimore, 
 
    zoom: 14 
 
    }; 
 
    var map = new google.maps.Map(
 
    document.getElementById('map-canvas'), mapOptions); 
 
    var cafeMarker = new google.maps.Marker({ 
 
    position: baltimore1, 
 
    map: map, 
 
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', 
 
    title: 'Cafe' 
 
    }); 
 
    var panoramaOptions = { 
 
    position: baltimore, 
 
    pov: { 
 
     heading: 4, 
 
     pitch: 10 
 
    } 
 
    }; 
 
    var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions); 
 
    var cafeMarker2 = new google.maps.Marker({ 
 
    position: baltimore1, 
 
    map: panorama, 
 
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', 
 
    title: 'Cafe' 
 
    }); 
 
    map.setStreetView(panorama); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<div id="map-canvas" style="width: 45%; height: 100%;float:left"></div> 
 
<div id="pano" style="width: 45%; height: 100%;float:left"></div>