Google StreetView / Maps API
I am trying to overlay a marker on Google Street View. I can get the marker on Google Map, but it doesn't show up in 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 link: https://developers.google.com/maps/documentation/javascript/examples/streetview-overlays https://developers.google.com/maps/documentation/javascript/examples/streetview-embed
Thank! Please check my violin for what I have. This should be the marker that appears at the roundabout.
+3
source to share
1 answer
You must also add a marker to the street view (and another from the one on the map).
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'
});
snippet of code:
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>
+1
source to share