https://natasho.co.jp/wp-content/themes/natashocojp/assets/js/googlemap.js?ver=1.1.1

1/* ==========================================================================
2   取扱店MAP用スクリプト
3   ========================================================================== */
4
5
6/**
7 * 参考)
8 *     [Google Map API]
9 *     https://developers.google.com/maps/documentation/javascript/reference?hl=ja
10 *     [BLOG等]
11 *     http://www.geekpage.jp/web/google-maps-api/
12 *     http://lopan.jp/google-map-customize/
13 */
14
15
16(function() {
17	var map;
18	var bounds;
19	var infoWindows = [];
20	var markers = [];
21	var currentInfoWindow = null;
22
23	jQuery.gMap = {
24		init: function() {
25			var options = {
26				mapTypeId: google.maps.MapTypeId.ROADMAP,
27				mapTypeControl: false,
28				scrollwheel: false,
29				fullscreenControl: false,
30				zoom: 16,
31				backgroundColor: "#ffffff"
32			};
33			map = new google.maps.Map(document.getElementById("mapContainer"), options);
34			bounds = new google.maps.LatLngBounds();
35		},
36		addMarkerNormal: function(gMapLatLng) {
37			var marker = new google.maps.Marker({
38				position: gMapLatLng,
39				map: map,
40				draggable: false
41			});
42			markers.push(marker);
43			bounds.extend(gMapLatLng);
44		},
45		addMarker: function(gMapLatLng, name, iconUrl) {
46			var image = {
47				url: iconUrl,
48				size: new google.maps.Size(40, 50),
49				origin: new google.maps.Point(0, 0),
50				anchor: new google.maps.Point(20, 50),
51				scaledSize: new google.maps.Size(40, 50)
52			};
53
54			var marker = new google.maps.Marker({
55				position: gMapLatLng,
56				map: map,
57				draggable: false,
58				icon: image,
59				title: name
60			});
61			markers.push(marker);
62			bounds.extend(gMapLatLng);
63		},
64		addInfoWindow: function(name) {
65			var boxText = '<span style="font-size:14px;"><strong>' + name + '</strong></span>';
66
67			var options = {
68				content: boxText,
69				disableAutoPan: false,
70				zIndex: null
71			};
72			infoWindows.push(new google.maps.InfoWindow(options));
73		},
74		bindInfoWindowOnMarker: function() {
75			var marker = markers[markers.length - 1];
76			var infoWindow = infoWindows[infoWindows.length -1];
77			google.maps.event.addListener(marker, 'click', function() {
78				if (currentInfoWindow) {
79					currentInfoWindow.close();
80				}
81				infoWindow.open(map, marker);
82				currentInfoWindow = infoWindow; //最後に開いたWindowを記憶
83			});
84		},
85		fitBounds: function() {
86			if (markers.length > 1) {
87				map.fitBounds(bounds);
88				// ズームレベル変更 : 1 zoomoutする
89				var listener = google.maps.event.addListener(map, "idle", function() {
90					var tmpZoom = map.getZoom() - 1;
91					map.setZoom(tmpZoom);
92					google.maps.event.removeListener(listener);
93				});
94			}
95		},
96		setCenter: function() {
97			map.setCenter(bounds.getCenter());
98		},
99		setStyle: function() {
100			// 文字・オブジェクトのスタイル指定 この共通マップJSでは未指定
101		}
102	};
103})();
104
105
106jQuery(function() {
107	/**
108	 * Google Map 呼び出し
109	 */
110	jQuery.gMap.init();
111
112	jQuery('.googlemap-loc').each(function() {
113		if (typeof(jQuery(this).attr('data-latlng')) === undefined) {
114			return;
115		}
116
117		var latLng = jQuery(this).attr('data-latlng').split(',');
118		var gMapsLatLng = new google.maps.LatLng(latLng[0], latLng[1]);
119		var dataName = jQuery(this).attr('data-name');
120		var dataIconUrl = jQuery(this).attr('data-icon');
121
122		jQuery.gMap.addInfoWindow(dataName);
123		jQuery.gMap.addMarker(gMapsLatLng, dataName, dataIconUrl);
124		jQuery.gMap.bindInfoWindowOnMarker();
125	});
126
127	jQuery.gMap.fitBounds();
128	jQuery.gMap.setCenter();
129	jQuery.gMap.setStyle();
130
131	jQuery(window).on('resize', function(){
132		//jQuery.gMap.fitBounds();
133		jQuery.gMap.setCenter();
134	});
135
136});