Google ストリート マップにカスタム オーバーレイを追加する方法はありますか?
オーバーレイを配置したい例を次に示します:
JSFiddle
ここにコードがあります
<html><head><style type="text/css">@media print { .gmnoprint { display:none }}@media screen { .gmnoscreen { display:none }}</style>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Layer</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var caffe = new google.maps.LatLng(37.869085,-122.254775);
function initialize() {
var panoramaOptions = {
position:caffe,
linksControl: false, // disables link control
panControl: false,
enableCloseButton: false,
pov: {
heading: 270,
pitch:0,
zoom:1
},
visible:true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
google.maps.event.addListener(panorama, 'pano_changed', function() {
//var panoCell = document.getElementById('pano_cell');
// panoCell.firstChild.nodeValue = panorama.getPano();
});
google.maps.event.addListener(panorama, 'links_changed', function() {
/*var linksTable = document.getElementById('links_table');
while(linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
};
var links = panorama.getLinks();
for (var i in links) {
var row = document.createElement("tr");
linksTable.appendChild(row);
var hCell = document.createElement("td");
var hText = "Link: " + i + "";
hCell.innerHTML = hText;
var vCell = document.createElement("td");
var vText = links[i].description;
vCell.innerHTML = vText;
linksTable.appendChild(hCell);
linksTable.appendChild(vCell);
}*/
});
google.maps.event.addListener(panorama, 'position_changed', function() {
// console.log(panorama.getPosition());
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
console.log(panorama.getPov().heading);
});
}
</script>
<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/1/%7Bcommon,map%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/1/%7Butil,onion%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/1/%7Bcontrols,stats%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/1/%7Bmarker%7D.js"></script></head>
<body onload="initialize()">
<div id="pano" style="width: 400px; height: 300px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);"></div>
</body></html>