谷歌街景/地圖API

Question

我想覆蓋谷歌街景上的標記。我能夠在Google Map上獲得一個標記，但它沒有出現在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參考：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>