このサンプルは、Google Maps API version2を使用しています。Google Maps API version2は2013年で終了予定です。このサンプルのGoogle Maps API version3のページは、「Google ストリートビューの視点とマーカーを同期する」です。

例－49：Google ストリートビューの視点とマーカーを同期する

GStreetviewPanorama.initializedイベントとyawchangedイベントをキャッチすることでyawが分かるのでこれをもとにGMarker.setImage()メソッドでアイコン画像を変更します。

<html>
<head>
  <script src="http://maps.google.co.jp/maps?file=api&v=2&key=[MAPS_API_KEY]"
     type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[
  
  var streetViewObj, marker;
  function initialize () {
    if (GBrowserIsCompatible()) {
      var init_pos = new GLatLng(35.014975, 135.782479);
      var init_zoom = 16;
      var map_canvas = new GMap2(document.getElementById("map_canvas"));
      map_canvas.setCenter(init_pos, init_zoom);
      
      //マーカーを作成
      var pegmanIcon = new GIcon();
      pegmanIcon.image = "icon/stIcon0.png";
      pegmanIcon.iconSize = new GSize(49, 52);
      pegmanIcon.iconAnchor = new GPoint(24, 34);
      var markerOpts = {
        draggable : true,
        icon : pegmanIcon
      };
      marker = new GMarker(init_pos, markerOpts);
      GEvent.addListener(marker, "dragend", onMarkerDragend);
      map_canvas.addOverlay(marker);

      //地図の中心位置のストリートビューの表示
      var stContainer = document.getElementById("streetview_canvas");
      var stOpts = {
        latlng : init_pos
      };
      streetViewObj = new GStreetviewPanorama(stContainer, stOpts);
      GEvent.addListener(streetViewObj, "initialized", onStreetviewInitialized);
      GEvent.addListener(streetViewObj, "yawchanged", onStreetviewYawChanged);
      
      //ストリートビューが利用できる位置が分かるレイヤーを追加
      map_canvas.addOverlay(new GStreetviewOverlay());
    }
  }
  function onMarkerDragend (latlng) {
    //マーカーがドラッグ＆ドロップされたら、画像を更新
    var pov = streetViewObj.getPOV();
    streetViewObj.setLocationAndPOV(latlng, pov);
  }
  function onStreetviewInitialized (location) {
    marker.setLatLng(location.latlng);
    var angle = Math.floor(location.pov.yaw / (360 / 16));
    marker.setImage("icon/stIcon" + angle + ".png");
  }
  function onStreetviewYawChanged (yaw) {
    var angle = Math.floor(yaw / (360 / 16));
    marker.setImage("icon/stIcon" + angle + ".png");
  }
  
  //]]>
  </script>
</head>
<body onload="initialize()" onunload="GUnload()">
  <div id="map_canvas" style="width: 100%; height: 45%"></div>
  <div id="streetview_canvas" style="width: 100%; height: 45%"></div>
</body>
</html>