[f:id:alfe1025:20151109075454g:plain]

前回の続き [http://alfe.hateblo.jp/entry/2015/11/07/Google_Maps_API%E3%82%92%E3%81%A4%E3%81%8B%E3%81%A3%E3%81%A6%E3%80%81%E4%B8%80%E7%95%AA%E7%B0%A1%E5%8D%98%E3%81%AA%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%88%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E3%81%A4:embed:cite]

出来上がるものはこちら [http://alfe.xyz/funyou/streetview_simple]

前回作った、簡単なストリートビューに数行追加すると ストリートビュー上にアイコンだとかお知らせだとかがおけます。

コードはこんな感じ。

|javascrpt| var panorama; function initialize() { panorama = new google.maps.StreetViewPanorama( document.getElementById('streetview'), { position: { lat: 34.6899593, //緯度 lng: 135.8538238 //経度 }, pov: { heading: -120, //見る方角 +が時計回り、-が反時計回り pitch: 0 //数字を大きくすると上を向く }, zoom: 1 //ズームのレベル 1以上推奨 });

　// 追加した部分 var marker = new google.maps.Marker({ position: { lat: 34.68989, //緯度 lng: 135.85378 //経度 }, map: panorama, //どの地図にマーカーを置くか icon: "now.png" //マーカー画像の変更 }); // 追加ここまで } ||<

追加したのは8行。 もちろん、 new google.maps.Marker が入った変数を増やしていけば 複数のところにアイコンを表示することが可能です。