將infowindow添加到自定義谷歌街景

Question

請幫我添加一個InfoWindow到這個自定義谷歌街景。 http://jsfiddle.net/geocodezip/7mh5ac28/2/

繼承人的代碼我我特林添加到infomarker

var contentString = '<div id="content">'+ 
    '<div id="siteNotice">'+ 
    '</div>'+ 
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
    '<div id="bodyContent">'+ 

    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+ 
    '(last visited June 22, 2009).</p>'+ 
    '</div>'+ 
    '</div>'; 

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 


google.maps.event.addListener(bankMarker, 'click', function() { 
    infowindow.open(panorama,cafeMarker); 
}); 

Answer 1

你在你的代碼一個錯字整合。 bankMarker應該是cafeMarker。

proof of concept fiddle

代碼片段：

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var fenway = new google.maps.LatLng(34.9355, -107.539254); 
 

 
    var panoOptions = { 
 
    position: fenway, 
 
    addressControlOptions: { 
 
     position: google.maps.ControlPosition.BOTTOM_CENTER 
 
    }, 
 
    linksControl: false, 
 
    panControl: false, 
 
    zoomControlOptions: { 
 
     style: google.maps.ZoomControlStyle.SMALL 
 
    }, 
 
    enableCloseButton: false 
 
    }; 
 

 
    var panorama = new google.maps.StreetViewPanorama(
 
    document.getElementById('map-canvas'), panoOptions); 
 

 
    var cafe = new google.maps.LatLng(34.935196, -107.539546); 
 

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

 
    var contentString = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<p>Attribution: <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + 
 
    'Uluru</a> ' + 
 
    '(last visited June 22, 2009).</p>' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: contentString 
 
    }); 
 

 

 
    google.maps.event.addListener(cafeMarker, 'click', function() { 
 
    infowindow.open(panorama, cafeMarker); 
 
    }); 
 

 
    // Set up the map ====================================================================== 
 
    var myOptions = { 
 
    zoom: 15, 
 
    center: cafe 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), 
 
    myOptions); 
 
    var cafeMarkerMap = new google.maps.Marker({ 
 
    position: cafe, 
 
    map: map, 
 
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', 
 
    title: 'Cafe' 
 
    }); 
 
    var panoMarker = new google.maps.Marker({ 
 
    position: panorama.getPosition(), 
 
    map: map, 
 
    icon: { 
 
     url: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png', 
 
     size: new google.maps.Size(7, 7), 
 
     anchor: new google.maps.Point(3.5, 3.5) 
 
    }, 
 
    title: 'Pano' 
 
    }); 
 

 
    document.getElementById('info').innerHTML = google.maps.geometry.spherical.computeDistanceBetween(panorama.getPosition(), cafe).toFixed(2) + " meters"; 
 
    var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), cafe); 
 

 
    // alert(data.location.latLng+":"+myLatLng+":"+heading); 
 
    panorama.setPov({ 
 
    heading: heading, 
 
    pitch: 0, 
 
    zoom: 1 
 
    }); 
 
    google.maps.event.addListener(map, 'click', function(evt) { 
 
    document.getElementById('info').innerHTML = evt.latLng.toUrlValue(6); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas, 
 
#map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div> 
 
<div id="info"></div>