如何用分屏谷歌地图和街景打开信息窗口?

时间:2014-10-24 18:15:23

标签: google-maps-markers infowindow google-street-view

所以我有一个功能正常的代码(example here)来创建半谷歌地图混合视图的分屏,然后当你点击该地图上的某个地方(左侧)然后(右侧)打开街景位置。

我希望在混合地图一侧有一个标记,当点击该标记时,在该侧打开信息窗口,然后在屏幕右侧打开该位置的街道视图。但我似乎无法弄清楚如何在该标记中编码以在左侧地图上打开信息窗口/气泡?

这是当前的代码(包括我所做的错误,因为它不起作用):

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var myCenter = new google.maps.LatLng(42.315126 , -72.63455);
var DoYouFeel = new google.maps.LatLng(42.315148 , -72.634429)
var sv = new google.maps.StreetViewService();

var panorama;

function initialize() {

  panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));

  // Set up the map
  var mapOptions = {
    center: myCenter,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    streetViewControl: false
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  //Set up the markers
  var marker = new google.maps.Marker({
      position: DoYouFeel,
  });
marker.setMap(map);

google.maps.event.addListener(marker, 'click', function() {
  bubble = new google.maps.InfoWindow({
          content: '<div id="mydiv"><br><embed src="Do You Feel....mov" width="720" height="576" align="center"><br><br></div>'

        })
        bubble.open(map, marker);
});

  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  google.maps.event.addListener(map, 'click', function(event) {
      sv.getPanoramaByLocation(event.latLng, 50, processSVData);
  });
}

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 270,
      pitch: 0
    });
    panorama.setVisible(true);

    google.maps.event.addListener(marker, 'click', function() {

      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });
  } else {
    alert('Street View data not found for this location.');
  }
}

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

    </script>

0 个答案:

没有答案