GoogleMap

HOME
Google
GoogleMap
グーグルマップAPIでグーグルマップの吹き出し（InfoWindow）内にストリートビューを表示する方法

2013年12月11日 / 最終更新日時 : 2013年12月12日あずみ GoogleMap

グーグルマップAPIでグーグルマップの吹き出し（InfoWindow）内にストリートビューを表示する方法

グーグルマップAPIでは、グーグルマップの吹き出し（InfoWindow）内にストリートビューを表示することができます。

マーカーにクリックイベントを登録する際、InfoWindowにストリートビューオブジェクトを登録するだけで簡単に実装できます。

以下、googlemapのコードです。

var map;
var infowindow;
var marker;
var canvas = 'map';
var lat = '35.658704';
var lng = '139.745408';
var infoWindow = {
    id: 'pano',
	width: '400px',
    height: '300px'
};
var latlng = new google.maps.LatLng(lat, lng);

google.maps.event.addDomListener(window, 'load', function(){

var mapdiv = document.getElementById(canvas);
    map = new google.maps.Map(mapdiv);
    map.setOptions({
        zoom: 14,
        center: latlng,
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

// マーカーをセットする
	marker = new google.maps.Marker({
		position: latlng,
		map: map
    });

// マーカーにclickイベントを登録  
	google.maps.event.addListener(marker, 'click', function() {

// InfoWindowの設定
    	var infowindow = new google.maps.InfoWindow({
			content: '<div id="' + infoWindow.id + '" style="width:'+ infoWindow.width + ';height:'+ infoWindow.height + '"></div>'
		});

// InfoWindowにストリートビューを登録
		google.maps.event.addListener(infowindow, 'domready', function() {

// ストリートビューのオプションを設定
            var panoramaOptions = {
				position: marker.getPosition(),
				linksControl: false,
				addressControl: false,
				enableCloseButton: false,
				panControl: false,
				scrollwheel: false
			};

// ストリートビューオブジェクトを生成
            new  google.maps.StreetViewPanorama(document.getElementById(infoWindow.id), panoramaOptions);
		});

infowindow.open(marker.getMap(), marker);
	});
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

var map;

var infowindow;

var marker;

var canvas = 'map';

var lat = '35.658704';

var lng = '139.745408';

var infoWindow = {

id: 'pano',

width: '400px',

height: '300px'

};

var latlng = new google.maps.LatLng(lat, lng);

google.maps.event.addDomListener(window, 'load', function(){

var mapdiv = document.getElementById(canvas);

map = new google.maps.Map(mapdiv);

map.setOptions({

zoom: 14,

center: latlng,

mapTypeControl: true,

mapTypeId: google.maps.MapTypeId.ROADMAP

});

// マーカーをセットする

marker = new google.maps.Marker({

position: latlng,

map: map

});

// マーカーにclickイベントを登録

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

// InfoWindowの設定

var infowindow = new google.maps.InfoWindow({

content: '<div id="' + infoWindow.id + '" style="width:'+ infoWindow.width + ';height:'+ infoWindow.height + '"></div>'

});

// InfoWindowにストリートビューを登録

google.maps.event.addListener(infowindow, 'domready', function() {

// ストリートビューのオプションを設定

var panoramaOptions = {

position: marker.getPosition(),

linksControl: false,

addressControl: false,

enableCloseButton: false,

panControl: false,

scrollwheel: false

};

// ストリートビューオブジェクトを生成

new google.maps.StreetViewPanorama(document.getElementById(infoWindow.id), panoramaOptions);

});

infowindow.open(marker.getMap(), marker);

});

カテゴリー: GoogleMap

コメントを投稿するにはログインが必要です。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Ubuntu

2013年12月10日

GoogleMap

2013年12月12日

グーグルマップAPIでグーグルマップの吹き出し（InfoWindow）内にストリートビューを表示する方法

Ubuntuでmysql-serverを完全に削除する方法

ホテル・ストリートビューを作ってみた。