https://kochihotel.co.jp/js/googlemap.js

1/**
2 * Googlemap
3 */
4
5// クラス
6var googlemap = function() {
7
8	// プロパティ
9	this.map = null;
10	this.gmarker = new Array();
11	this.infoWin = null;
12	this.dispId = dispId;
13	this.pCenter = pCenter;
14	this.zoomLv = zoomLv;
15	this.isOpenFuki = isOpenFuki;
16	this.isDispFuki = isDispFuki;
17	this.intDispFuki = intDispFuki;
18	this.isPolyline = isPolyline;
19	this.isScrollWheel = isScrollWheel;
20	this.isMapTypeControl = isMapTypeControl;
21	this.points = points;
22	this.htmls = htmls;
23	this.icons = icons;
24	this.lines = lines;
25	this.mapType = mapType;
26	this.isZoomControl = isZoomControl;
27	this.isStreetViewControl = isStreetViewControl;
28	this.isPanControl = isPanControl;
29	this.ctrlDispPosition = ctrlDispPosition;
30	this.isStyle = isStyle;
31	this.style = style;
32
33	// マップ表示
34	this.setMap = function() {
35		// ボタン表示位置
36		ctrlPosition = {position:this.ctrlDispPosition};
37		// スタイル
38		mapStyles = [];
39		if( this.isStyle ) {
40			mapStyles = this.style;
41			var myOptions = {
42				zoom: this.zoomLv,
43				center: this.pCenter,
44				mapTypeId: this.mapType,
45				scrollwheel: this.isScrollWheel,
46				mapTypeControl: this.isMapTypeControl,
47				zoomControl: this.isZoomControl,
48				zoomControlOptions: ctrlPosition,
49				streetViewControl: this.isStreetViewControl,
50				streetViewControlOptions: ctrlPosition,
51				panControl: this.isPanControl,
52				panControlOptions: ctrlPosition,
53				styles: mapStyles
54			};
55		}
56		else {
57			var myOptions = {
58				zoom: this.zoomLv,
59				center: this.pCenter,
60				mapTypeId: this.mapType,
61				scrollwheel: this.isScrollWheel,
62				mapTypeControl: this.isMapTypeControl,
63				zoomControl: this.isZoomControl,
64				zoomControlOptions: ctrlPosition,
65				streetViewControl: this.isStreetViewControl,
66				streetViewControlOptions: ctrlPosition,
67				panControl: this.isPanControl,
68				panControlOptions: ctrlPosition
69			};
70		}
71
72		this.map = new google.maps.Map(document.getElementById(this.dispId), myOptions);
73
74		// マーカー表示
75		for(i = 0; i < points.length; i++) {
76			this.gmarker[i] = new google.maps.Marker({
77				position: this.points[i],
78				map: this.map,
79				icon: this.icons[i]
80			});
81
82			// イベント設定
83			if(this.isOpenFuki) {
84				this.setFukiClick(this.gmarker[i], this.htmls[i], this.points[i]);
85			}
86		}
87
88		// 初期吹き出し表示
89		if(this.isDispFuki) {
90			setFukiMsg(this.gmarker[this.intDispFuki], this.htmls[this.intDispFuki]);
91		}
92
93		// ポリライン表示
94		if(this.isPolyline) {
95			for(i = 0; i < this.lines.length; i++) {
96				this.setPolyline(this.lines[i]);
97			}
98		}
99	}
100
101	// 吹き出しメッセージ設定
102	var setFukiMsg = function(marker, html) {
103		if(this.infoWin) {
104			// 吹き出し閉じる
105			this.infoWin.close();
106			this.infoWin = null;
107		}
108
109		this.infoWin = new google.maps.InfoWindow({
110			content: html
111		});
112
113		// 吹き出し表示
114		this.infoWin.open(marker.getMap(), marker);
115	}
116
117	// クリックイベント設定
118	this.setFukiClick = function(marker, html, point) {
119		google.maps.event.addListener(marker, 'click', function(event){
120			setFukiMsg(marker, html);
121			this.map.panTo(point);
122		});
123	}
124
125	// アイコンクリック
126	this.myclick = function(i) {
127		setFukiMsg(this.gmarker[i], this.htmls[i]);
128		this.map.panTo(this.points[i]);
129	}
130
131	// ポリライン表示
132	this.setPolyline = function(line) {
133		var rendererOptions = {
134			draggable: false,
135			preserveViewport:true
136		};
137		// ラインのオプション
138		var polyLineOptions = {
139			strokeColor: line['color']
140		};
141		var directionsDisplay = new google.maps.DirectionsRenderer({
142			polylineOptions: {
143				strokeColor: line['color'],
144				strokeWeight: 4,
145				strokeOpacity: 0.6
146			}
147		});
148		directionsDisplay.setOptions({
149			suppressMarkers :true,
150			suppressInfoWindows: true
151		});
152		var directionsService = new google.maps.DirectionsService();
153
154		// 中間地点
155		arrWays = new Array();
156
157		for(y = 0; y < line['ways'].length; y++) {
158			arrWays[y] = {location: line['ways'][y]};
159		}
160
161		var request = {
162			origin: line['start'],
163			destination: line['end'],
164			waypoints: arrWays,
165			travelMode: google.maps.DirectionsTravelMode.DRIVING,				//ドライビングモード指定（車）
166			unitSystem: google.maps.DirectionsUnitSystem.METRIC,					//単位km表示
167			optimizeWaypoints: true,																	//最適化された最短距離にする。
168			avoidHighways: false,																			//trueで高速道路を使用しない
169			avoidTolls: false																					//trueで有料道路を使用しない
170		};
171
172		directionsService.route(request, function(response, status){
173			if (status == google.maps.DirectionsStatus.OK){
174				directionsDisplay.setDirections(response);
175			}
176		});
177
178		directionsDisplay.setMap(this.map);
179	}
180

181	// ズームイン
182	this.setZoomIn = function(){
183		this.map.setZoom( this.map.getZoom()+1 );
184	}
185
186	// ズームアウト
187	this.setZoomOut = function(){
188		this.map.setZoom( this.map.getZoom()-1 );
189	}
190}