https://yatuhasian.jp/assets/lib/gmap/GoogleMaps.js

1//マップ保持用
2var googlemap = null;
3//地図上のピンデータ
4var markers = [];
5//情報ウィンドウデータ
6var infos = [];
7
8//グーグルマップ初期化
9settingMap();
10
11function settingMap() {
12	//初期中央の座標
13	var _myLatlng = new google.maps.LatLng(34.995252, 135.712408);
14	var myOptions = {
15		//地図のズーム
16		zoom : 15,
17		center : _myLatlng,
18		scrollwheel : false,
19		mapTypeControl : false,
20		panControl : false,
21		mapTypeId : google.maps.MapTypeId.ROADMAP
22	};
23	//表示するHTMLのIDを指定
24	var map = new google.maps.Map(document.getElementById("gmapArea"), myOptions);
25	var poins = point.length;
26	//座標
27	for(var i = 0; i < poins; i++) {
28		if(i === 0) {
29			//一番最初のアイコン
30			var marker = new google.maps.Marker({
31				icon : new google.maps.MarkerImage('/assets/lib/gmap/img/icon_map0.png', new google.maps.Size(64, 64), new google.maps.Point(0, 0)),
32				//影が必要な場合はここに追加
33				//shadow :
34				map : map,
35				position : point[i],
36				//ユニークなIDを登録
37				id : i,
38				zIndex : 100
39			});
40		} else {
41			var marker = new google.maps.Marker({
42				icon : new google.maps.MarkerImage('/assets/lib/gmap/img/icon_map' + i + '.png', new google.maps.Size(64, 64), new google.maps.Point(0, 0)),
43				//icon : new google.maps.MarkerImage('assets/lib/gmap/img/icon_map2.png', new google.maps.Size(37, 55), new google.maps.Point(0, 0)),
44				//shadow :
45				map : map,
46				position : point[i],
47				id : i,
48				zIndex : i
49			});
50		}
51		//クリックイベントを登録
52		google.maps.event.addListener(marker, 'click', mapClickHandler);
53		//吹き出しを配列に入れる
54		var infowindow = new google.maps.InfoWindow({
55			content : htmls[i]
56		});
57		infos.push(infowindow);
58		//マーカーを配列に入れる
59		markers.push(marker);
60        var styleOptions =[{"stylers": [{ "saturation": -100 },{ "lightness": 15 }]}];
61        var sampleType = new google.maps.StyledMapType(styleOptions);
62        map.mapTypes.set('sample', sampleType);
63        map.setMapTypeId('sample');
64	};
65	//最初から施設の情報（吹き出し）を表示する
66//	infos[0].open(googlemap, markers[0]);
67	//マップを代入
68	googlemap = map;
69}
70
71//HTML側から呼ばれる関数
72function myclick(_value) {
73	googlemap.panTo(point[_value]);
74	openInfo(_value);
75	markers[_value].setZIndex(markers.length - 1);
76}
77
78//地図ポイントをクリックしたときの処理
79function mapClickHandler(event) {
80	openInfo(this.id);
81	googlemap.panTo(point[this.id]);
82	markers[this.id].setZIndex(markers.length - 1);
83}
84
85//情報ウィンドウを開く
86function openInfo(_value) {
87	var len = infos.length;
88	for(var i = 0; i < len; i++) {
89		infos[i].close();
90	};
91	infos[_value].open(googlemap, markers[_value]);
92}
93　
94//function toSanko() {
95//  googlemap.panTo(new google.maps.LatLng(34.988979, 135.750527));
96//}