スポンサーリンク

目次

はじめに

当サイトの国のページに使用しているインスタ映えスポットマップのソースコードを公開!Google Map Apiで、ピンのデザインを変更したり、クリックすることで好きなページに遷移させたり、 さらにはクリックすることで多段階で倍率を変更するピンも設置したりしています。いろんなブログを参考にしましたが、おそらく一番簡潔に無駄の無いコードになっていると思います。ぜひご覧ください。さらには開発中の、HTML要素のボタンを押して 対応するピンをズームする機能も一部紹介。(未完成なので分かる方いたら教えてください)
私自身初心者から始めて最初に書いたJSコードがこれです。ググりまくってコピペしまくって作った処女作になります。温かい目で見守ってやってください。
実際にこのコードの地図画表示さ得ているページはこちらになります。
※使用する場合、できればリンク付してほしいです!!

https://zeroiw.com/uk.html

1 準備

1-1 htmlにAPIを読み込む

まずは地図を表示させたいHTMLファイルの<BODY>のさいごに、


<script src="(Google MapのJavaScriptファイルのソース)"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=(APIキー)=initMap"></script>
            

と記載します。これでGooogle Map Apiの読み込みが完了しました。

1-2 地図を表示させる

<BODY>のなかの地図を表示させたい場所に


<div id="mapmap"></div>
           

と書きます。mapmapの部分は何でも構いません。(私は試行錯誤する中でmapのidを別のところで使っていたのでmapmapにしています。笑)
まだこの時点では地図は表示されません。
CSSで


#mapmap{
width:xxx;
height:xxx;
}
            

として、大きさを指定してあげましょう。
これでHTMLとCSSの準備は完了です。

2 JSに記載していく

次に、地図の詳細を記載したJavaScriptファイルを作成します。 実際に地図が表示されているこちらのページを見てください。

https://zeroiw.com/uk.html

このように、私のサイトに表示されている地図には2種類のピンがあります。
①クリックすることでギャラリーページに飛ばすピン
です。このピンがあることで、旅行先の観光地の距離感を伝えることと、そこがどんな場所であるかを伝えること、の2つの目標を達成しようとしています。 それをスムーズにするのが
②クリックすることで拡大率を変更するピン
です。どうしてもピン同士が1つの場所に密集してしまい、隠れてしまうので、わかりやすくZOOMと書かれたピンを設置することで、クリックしてもらい、下に隠れたピンを発見してもらうことが狙いです。

とにかく言っても仕方ないのでコードを見ましょう!



var map;
var marker = [];
var infoWindow = [];

var windowWidth = $(window).width();
var windowSm = 640;
if (windowWidth <= windowSm) {
    //横幅640px以下のとき(つまりスマホ時)に行う処理を書く
		var Zoom = 4.73//最初の倍率
} else {
  //横幅640px超のとき(タブレット、PC)に行う処理を書く
	var Zoom = 5.76//最初の倍率
}
var country = "UK"//イメージファイル名など用いる国の名前
var center ={lat: 53.908004,lng:-2.2842697};//地図の中心
var galQuan =37//ギャラ理ーのピンの数
var zoomQuan = 3//ZOOMのピンの数

//ピンの場所と名前--------------------------------------------------------------------------------------------------------
var placeName = [
	{name:"BigBen",lat:51.5007419,lng:-0.124747 },
	{name:"BlairCastle",lat:56.7669925,lng:-3.8456974 },
	{name:"BlenheimPalace",lat:51.84139,lng:-1.361139 },
	{name:"BritishMuseum",lat:51.5194305,lng:-0.1270775 },
	{name:"BuckinghamPalace",lat:51.5013763,lng:-0.1420233 },
	{name:"Cardiff",lat: 51.4816341,lng:-3.1792421},
	{name:"ChesterCathedral",lat:53.1918559,lng:-2.891222 },
	{name:"ChristChurch",lat:51.7547079,lng:-1.2545205 },
	{name:"ConwyCastle",lat:53.2800714,lng:-3.8257537 },
	{name:"DonanCastle",lat: 57.273859,lng:-5.5161929},
	{name:"DurhamCastle",lat:54.775461,lng:-1.5763964 },
	{name:"EdinburghPalace",lat: 55.9527326,lng:-3.1723977},
	{name:"ForceRailwayBridge",lat:56.0006593,lng:-3.388557 },
	{name:"GiantsCauseway",lat:55.2408053,lng:-6.5117097 },
	{name:"Glasgow",lat:55.8642403,lng:-4.2520711 },
	{name:"GreenwichObservatory",lat:51.4768627,lng:-0.000637 },
	{name:"IsleofSkye",lat:57.535767,lng:-6.2271402 },
	{name:"JurassicCoast",lat: 50.6220778,lng:-2.2761152},
	{name:"KewGardens",lat:51.478673,lng:-0.2950657 },
	{name:"LakeDistrict",lat:54.4608645,lng:-3.0890862 },
	{name:"LeedsCastle",lat: 51.249005,lng:0.6303351},
	{name:"LiverpoolCathedral",lat:53.3974751,lng:-2.9734282 },
	{name:"LomondLake",lat: 56.1128954,lng:-4.6356054},
	{name:"London",lat: 51.506650,lng:-0.1291491},
	{name:"LondonEye",lat: 51.5033371,lng:-0.1196798},
	{name:"LondonHarrods",lat:51.4994121,lng:-0.1633748 },
	{name:"NationalGallery",lat:51.5089309,lng:-0.1284335 },
	{name:"SevenSisters",lat:50.7477572,lng:0.1897068 },
	{name:"SnowdoniaNationalPark",lat:52.9179956,lng:-3.8913629 },
	{name:"Stonehenge",lat:51.1788861,lng:-1.8263647 },
	{name:"StPaulsCathedral",lat:51.5138542,lng:-0.0984977 },
	{name:"ThamesRiver",lat:51.5092189,lng:-0.115141 },
	{name:"TowerBridge",lat:51.5054847,lng:-0.075465 },
	{name:"TowerofLondon",lat:51.5081505,lng:-0.0760525 },
	{name:"TrafalgarSquare",lat:51.5080467,lng:-0.1282374 },
	{name:"WestminsterAbbey",lat:51.4993189,lng:-0.1274502 },
	{name:"WestminsterPalace",lat:51.4994696,lng:-0.1248546 },
	//ZOOMのピン
	{name:"ZOOMpin1",lat:51.499767,lng:-0.125166},
	{name:"ZOOMpin2",lat:53.198369,lng:-2.890105},
	{name:"ZOOMpin3",lat:55.864243,lng:-4.243642},

]



// 地図の作成--------------------------------------------------------------------------------------------------------------------------------------
function initMap() {
	var mapLatLng = new google.maps.LatLng({lat:center.lat,lng:center.lng}); // 表示するときの地図の中心
	map = new google.maps.Map(document.getElementById('mapmap'), {
		center: mapLatLng,
		zoom: Zoom ,// 地図のズームを指定
		mapTypeControl: false, //マップタイプ コントロール
		fullscreenControl: true, //全画面表示コントロール
		streetViewControl: false, //ストリートビュー コントロール
		zoomControl: true, //ズーム コントロール
	});


	// マーカー毎の配置----------------------------------------------------------------------------------------------------------------------
	for (var i = 0; i < galQuan + zoomQuan; i++) {
		markerLatLng = new google.maps.LatLng({lat: placeName[i].lat, lng: placeName[i].lng});
		marker[i] = new google.maps.Marker({
			position: markerLatLng,
			map: map
		});

}

//ピンのプロパティ追加ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー-------------
//ギャラリーのピン
for(var i = 0;i<=galQuan - 1;i++){
	if (windowWidth <= windowSm) {
	    //横幅640px以下のとき(つまりスマホ時)に行う処理を書く
			marker[i].setOptions({ // 0から、一つ目のマーカー
				icon: {
					url: './mapProject/pin-image/'+country+'/'+placeName[i].name+'.jpg',
					size: new google.maps.Size(40,40),  // マーカーのサイズを変更①
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(16,16),
					scaledSize: new google.maps.Size(40,40), //サイズ変更②
				},
				zIndex:5,
				title:""+placeName[i].name+"",
			});
	} else {
	    //横幅640px超のとき(タブレット、PC)に行う処理を書く
			marker[i].setOptions({ // 0から、一つ目のマーカー
				icon: {
					url: './mapProject/pin-image/'+country+'/'+placeName[i].name+'.jpg',
					size: new google.maps.Size(75,75),  // マーカーのサイズを変更①
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(16,16),
					scaledSize: new google.maps.Size(75,75), //サイズ変更②
				},
				zIndex:5,
				title:""+placeName[i].name+"",
			});
	}
}
//ZOOMのピン
for(var i = galQuan ;i< galQuan + zoomQuan;i++){
	if (windowWidth <= windowSm) {
	    //横幅640px以下のとき(つまりスマホ時)に行う処理を書く
			marker[i].setOptions({
				icon: {
					url: './mapProject/pin-image/mainPin.png',
					size: new google.maps.Size(40,40),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(16,16),
					scaledSize: new google.maps.Size(40,40),
				},
				zIndex:10,
				lat:placeName[i].lat,
				lng:placeName[i].lng,
			});
	} else {
	    //横幅640px超のとき(タブレット、PC)に行う処理を書く
			marker[i].setOptions({
				icon: {
					url: './mapProject/pin-image/mainPin.png',
					size: new google.maps.Size(80,80),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(16,16),
					scaledSize: new google.maps.Size(80,80),
				},
				zIndex:10,
				lat:placeName[i].lat,
				lng:placeName[i].lng,
			});
	}
}
//マーカーにクリックイベント追加ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー---------------------------
//ギャラリーピン
for (var i = 0;i<=galQuan - 1;i++) {
	marker[i].addListener('click', function(event,name) {window.open('./Gallery/'+country+'/' + this.title + '.html', '_blank')});
}
//ZOOMのピン
for(var i = galQuan ;i< galQuan + zoomQuan;i++){
 marker[i].addListener('click', function(event,name) {
		if(map.getZoom() < 8){
			map.setZoom(8);
			map.setCenter(new google.maps.LatLng({lat:this.lat, lng:this.lng}));
		}else if (map.getZoom() < 11) {
			map.setZoom(11);
			map.setCenter(new google.maps.LatLng({lat:this.lat, lng:this.lng}));
		}else if (map.getZoom() < 13) {
			map.setZoom(13);
			map.setCenter(new google.maps.LatLng({lat:this.lat, lng:this.lng}));
		}else if (map.getZoom() < 16) {
			map.setZoom(16);
			map.setCenter(new google.maps.LatLng({lat:this.lat, lng:this.lng}));
		}	else if (map.getZoom() < 40) {
			map.setZoom(Zoom);
			map.setCenter(new google.maps.LatLng({lat:center.lat,lng:center.lng}));
		}
	});
}

//ZOOMのピン変更--------------------------------------------------------------------ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
if (windowWidth <= windowSm) {
    //横幅640px以下のとき(つまりスマホ時)に行う処理を書く
		google.maps.event.addListener(map, 'zoom_changed', function(e){
			const currentzoom = map.getZoom();
			if(currentzoom >= 16){
				let icon = {
					url: "./mapProject/pin-image/zoomOut.png",
					size: new google.maps.Size(40,40),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(16,16),
					scaledSize: new google.maps.Size(40,40),

				};
				for(var i=galQuan;i< galQuan + zoomQuan;i++){
					marker[i].setIcon(icon);
				}
			}
		});
		google.maps.event.addListener(map, 'zoom_changed', function(e){
			const currentzoom = map.getZoom();
			if(currentzoom < 16){
				let icon = {
					url: "./mapProject/pin-image/mainPin.png",
					size: new google.maps.Size(40,40),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(16,16),
					scaledSize: new google.maps.Size(40,40),

				};
				for(var i=galQuan;i< galQuan + zoomQuan;i++){
					marker[i].setIcon(icon);
				}
			}
		});

} else {
    //横幅640px超のとき(タブレット、PC)に行う処理を書く
		google.maps.event.addListener(map, 'zoom_changed', function(e){
			const currentzoom = map.getZoom();
			if(currentzoom >= 16){
				let icon = {
					url: "./mapProject/pin-image/zoomOut.png",
					size: new google.maps.Size(80,80),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(16,16),
					scaledSize: new google.maps.Size(80,80),

				};
				for(var i=galQuan;i< galQuan + zoomQuan;i++){
					marker[i].setIcon(icon);
				}
			}
		});
		google.maps.event.addListener(map, 'zoom_changed', function(e){
			const currentzoom = map.getZoom();
			if(currentzoom < 16){
				let icon = {
					url: "./mapProject/pin-image/mainPin.png",
					size: new google.maps.Size(80,80),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(16,16),
					scaledSize: new google.maps.Size(80,80),

				};
				for(var i=galQuan;i< galQuan + zoomQuan;i++){
					marker[i].setIcon(icon);
				}
			}
		});


}

	}


	for (var i = 0; i < placeName.length; i++) {
		function AttentionMarkar(i){
   map.setZoom(9);
	 map.setCenter(new google.maps.LatLng({lat:placeName[i].lat,lng:placeName[i].lng}));
	}
};


               

・・・とまあいきなりこんなもの見せられても全くわかりませんよね・・・・
大丈夫です。このコードを書いて3か月くらいたった今、私自身全くわかりません。ゆっくり見ていきましょう!

3 コード解説(地図ごとに変える部分)

私のコードの特徴なのですが、国の名前と座標がたくさん並んでいるところがあると思います。実は、長いように見えるこのコード、どの国に使う場合でも座標の部分までをその国の情報に書き換えるだけでいいのです。
ですのでやたらと変数が登場しますが、上の部分だけいじれば終わるようにする工夫のためなのでお許し下さい。


var map;
var marker = [];
var infoWindow = [];
          

いきなりですみません。僕もわかりません。とりあえず必要っぽいので書いておいてください。笑
ここはどの国でも共通です。


  var windowWidth = $(window).width();
  var windowSm = 640;

ここは画面サイズの切り替えポイントを指定しています。理由は次で説明します。


  if (windowWidth <= windowSm) {
      //横幅640px以下のとき(つまりスマホ時)に行う処理を書く
  		var Zoom = 4.73//最初の倍率
  } else {
    //横幅640px超のとき(タブレット、PC)に行う処理を書く
  	var Zoom = 5.76//最初の倍率
  }

先ほど指定した画面サイズの切り替えポイントで、地図を最初に表示した際の拡大率を変えています。スマホなど画面の小さいデバイスでは、より拡大率も小さくしてやらないと、国全体が画面に収まらないためです。
注意してほしいのが、お気づきの方も多いと思いますが実はここはZoomという変数に、数字を代入しているだけなのです。これは、先ほど言ったように、上のほうに国ごとに違ってくる値の設定をまとめておきたかったからです。


  var country = "UK"//イメージファイル名など用いる国の名前
  var center ={lat: 53.908004,lng:-2.2842697};//地図の中心
  var galQuan =37//ギャラ理ーのピンの数
  var zoomQuan = 3//ZOOMのピンの数

どんどん行きましょう。まず最初の1行が意味わからないと思います。これは画像などを国名ごとにフォルダ分けしているので、そのフォルダのソースに使われている国名を変数に代入しています。
次に二行目ですが、最初に地図を表示するときの中心座標です。これも同じく変数に代入してあります。
次に3、4行目ですが、それぞれ2種類のピンの個数を変数に代入しています。
これらすべて、直接それぞれ使用する場所に入力してもいいのですが、これも上のほうだけを変えれば他の国にも転用できるように、という工夫です。


  //ピンの場所と名前--------------------------------------------------------------------------------------------------------
  var placeName = [
  	{name:"BigBen",lat:51.5007419,lng:-0.124747 },
  	{name:"BlairCastle",lat:56.7669925,lng:-3.8456974 },
  	{name:"BlenheimPalace",lat:51.84139,lng:-1.361139 },
  	{name:"BritishMuseum",lat:51.5194305,lng:-0.1270775 },
  	{name:"BuckinghamPalace",lat:51.5013763,lng:-0.1420233 },
  	{name:"Cardiff",lat: 51.4816341,lng:-3.1792421},
  	{name:"ChesterCathedral",lat:53.1918559,lng:-2.891222 },
  	{name:"ChristChurch",lat:51.7547079,lng:-1.2545205 },
  	{name:"ConwyCastle",lat:53.2800714,lng:-3.8257537 },
  	{name:"DonanCastle",lat: 57.273859,lng:-5.5161929},
  	{name:"DurhamCastle",lat:54.775461,lng:-1.5763964 },
  	{name:"EdinburghPalace",lat: 55.9527326,lng:-3.1723977},
  	{name:"ForceRailwayBridge",lat:56.0006593,lng:-3.388557 },
  	{name:"GiantsCauseway",lat:55.2408053,lng:-6.5117097 },
  	{name:"Glasgow",lat:55.8642403,lng:-4.2520711 },
  	{name:"GreenwichObservatory",lat:51.4768627,lng:-0.000637 },
  	{name:"IsleofSkye",lat:57.535767,lng:-6.2271402 },
  	{name:"JurassicCoast",lat: 50.6220778,lng:-2.2761152},
  	{name:"KewGardens",lat:51.478673,lng:-0.2950657 },
  	{name:"LakeDistrict",lat:54.4608645,lng:-3.0890862 },
  	{name:"LeedsCastle",lat: 51.249005,lng:0.6303351},
  	{name:"LiverpoolCathedral",lat:53.3974751,lng:-2.9734282 },
  	{name:"LomondLake",lat: 56.1128954,lng:-4.6356054},
  	{name:"London",lat: 51.506650,lng:-0.1291491},
  	{name:"LondonEye",lat: 51.5033371,lng:-0.1196798},
  	{name:"LondonHarrods",lat:51.4994121,lng:-0.1633748 },
  	{name:"NationalGallery",lat:51.5089309,lng:-0.1284335 },
  	{name:"SevenSisters",lat:50.7477572,lng:0.1897068 },
  	{name:"SnowdoniaNationalPark",lat:52.9179956,lng:-3.8913629 },
  	{name:"Stonehenge",lat:51.1788861,lng:-1.8263647 },
  	{name:"StPaulsCathedral",lat:51.5138542,lng:-0.0984977 },
  	{name:"ThamesRiver",lat:51.5092189,lng:-0.115141 },
  	{name:"TowerBridge",lat:51.5054847,lng:-0.075465 },
  	{name:"TowerofLondon",lat:51.5081505,lng:-0.0760525 },
  	{name:"TrafalgarSquare",lat:51.5080467,lng:-0.1282374 },
  	{name:"WestminsterAbbey",lat:51.4993189,lng:-0.1274502 },
  	{name:"WestminsterPalace",lat:51.4994696,lng:-0.1248546 },
  	//ZOOMのピン
  	{name:"ZOOMpin1",lat:51.499767,lng:-0.125166},
  	{name:"ZOOMpin2",lat:53.198369,lng:-2.890105},
  	{name:"ZOOMpin3",lat:55.864243,lng:-4.243642},

  ]

ここが地図に表示するピンの名前と座標を指定している部分です。座標はGoogle Mapで調べましょう。名前はどこで使うかというと、リンク先のフォルダにをピンの名前を用いることで、リンクにnameと書けばピンの名前を用いたリンク先に飛ばせるからです。
以上が国ごとに変えなければいけない値になります。次の章では一度決めてしまえば、転用するときに変更の必要がほとんどない部分の解説をします。

スポンサーリンク

4 コード解説続き(マップコア部分:表示)


// 地図の作成--------------------------------------------------------------------------------------------------------------------------------------
function initMap() {
	var mapLatLng = new google.maps.LatLng({lat:center.lat,lng:center.lng}); // 表示するときの地図の中心
	map = new google.maps.Map(document.getElementById('mapmap'), {
		center: mapLatLng,
		zoom: Zoom ,// 地図のズームを指定
		mapTypeControl: false, //マップタイプ コントロール
		fullscreenControl: true, //全画面表示コントロール
		streetViewControl: false, //ストリートビュー コントロール
		zoomControl: true, //ズーム コントロール
	});
          

ここでは地図自体の設定が書き込まれています。1行目、3行目は、前の章で変数を指定したものをここで使っています。
2行目の(”mapmap”)の部分は、HTMLのほうで指定したidをここに書き込んでください。
その下の4行は、マップタイプ=航空写真に変更する機能を付けるかどうか、全画面表示できるようにするかどうか、ストリートビューをできるようにするかどうか、ズームできるようにするかどうか、
の設定を行っています。trueでそのボタン(ズームならバー)が表示され、falseなら表示されません。(ズームは非表示にしてもバーが非表示人るだけですので、普通にスマホの地図と同じ要領での拡大縮小はできます。)


  // マーカー毎の配置----------------------------------------------------------------------------------------------------------------------
for (var i = 0; i < galQuan + zoomQuan; i++) {
	markerLatLng = new google.maps.LatLng({lat: placeName[i].lat, lng: placeName[i].lng});
	marker[i] = new google.maps.Marker({
		position: markerLatLng,
		map: map
	});
}
      

ここではfor構文でピンを大量生産しています。
markerLatLngという変数に、先ほど指定した観光地ごとの緯度経度をそれぞれ代入している形です。
3行目から下は、ピンにmarkerという名前を付けて、先ほど指定した座標が、それぞれのピンの座標であることを指定、さらにこの地図に表示させますよ~と指定してやってます。
for構文の中にgalQuanとzoomQuanガあります。これで繰り返しの回数をピンの数だけに指定できるというわけです。


  //ピンのプロパティ追加ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー-------------
  //ギャラリーのピン
  for(var i = 0;i<=galQuan - 1;i++){
  	if (windowWidth <= windowSm) {
  	    //横幅640px以下のとき(つまりスマホ時)に行う処理を書く
  			marker[i].setOptions({ // 0から、一つ目のマーカー
  				icon: {
  					url: './mapProject/pin-image/'+country+'/'+placeName[i].name+'.jpg',
  					size: new google.maps.Size(40,40),  // マーカーのサイズを変更①
            scaledSize: new google.maps.Size(40,40), //サイズ変更②
  					origin: new google.maps.Point(0,0),
  					anchor: new google.maps.Point(20,20),
  				},
  				zIndex:5,
  				title:""+placeName[i].name+"",
  			});
  	} else {
  	    //横幅640px超のとき(タブレット、PC)に行う処理を書く
  			marker[i].setOptions({ // 0から、一つ目のマーカー
  				icon: {
  					url: './mapProject/pin-image/'+country+'/'+placeName[i].name+'.jpg',
  					size: new google.maps.Size(75,75),  // マーカーのサイズを変更①
            scaledSize: new google.maps.Size(75,75), //サイズ変更②
  					origin: new google.maps.Point(0,0),
  					anchor: new google.maps.Point(37,37),
  				},
  				zIndex:5,
  				title:""+placeName[i].name+"",
  			});
  	}
  }

ここでは観光地のピンの見た目の詳細を指定しています。
iconという部分の中身ですが、上から、ピン自体の見た目につかう画像、ピンのサイズ、それに合わせて画像を小さくする、ピンの起点、画像のどの部分に起点を置くか
です。 こちらも画面サイズに合わせてピンの大きさは変えてあります。
zIndexとは値が高いほどピンが上に表示されるものです。タイトルはもう一つ変数が使いたい場面があったのですが、もう余ってなかったのでタイトルを使っています。通常はホバーすることで地名などを表示するために使います。


    //ZOOMのピン
    for(var i = galQuan ;i< galQuan + zoomQuan;i++){
    	if (windowWidth <= windowSm) {
    	    //横幅640px以下のとき(つまりスマホ時)に行う処理を書く
    			marker[i].setOptions({
    				icon: {
    					url: './mapProject/pin-image/mainPin.png',
    					size: new google.maps.Size(40,40),
    					origin: new google.maps.Point(0,0),
    					anchor: new google.maps.Point(16,16),
    					scaledSize: new google.maps.Size(40,40),
    				},
    				zIndex:10,
    				lat:placeName[i].lat,
    				lng:placeName[i].lng,
    			});
    	} else {
    	    //横幅640px超のとき(タブレット、PC)に行う処理を書く
    			marker[i].setOptions({
    				icon: {
    					url: './mapProject/pin-image/mainPin.png',
    					size: new google.maps.Size(80,80),
    					origin: new google.maps.Point(0,0),
    					anchor: new google.maps.Point(16,16),
    					scaledSize: new google.maps.Size(80,80),
    				},
    				zIndex:10,
    				lat:placeName[i].lat,
    				lng:placeName[i].lng,
    			});
    	}
    }
  

こちらはズームピンの詳細を決めています。
ほとんど先ほどと同じですが、zIndexを観光地ピンより大きくすることで上に表示されるようにしてあります。(ちなみに同じ値のzIndexのピン同士は緯度が低いものが上に表示されます。)
ちなみにズームピンはここでも緯度経度を指定しなおしていますが理由は忘れてしまいました。申し訳ありません・・・

5 コード解説続き(マップコア部分:クリックイベント)

つぎに観光地ピン、ズームピンそれぞれのクリックイベントの詳細について説明します。


//マーカーにクリックイベント追加ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー---------------------------
//ギャラリーピン
for (var i = 0;i<=galQuan - 1;i++) {
	marker[i].addListener('click', function(event,name) {window.open('./Gallery/'+country+'/' + this.title + '.html', '_blank')});
}
    

観光地ピンのクリックイベントです。for構文の中身で、galQuan-1となっているのは、JavaScriptでは複数指定した変数の序数が0から始まるためです。
そしてクリックすると、Galleryフォルダ内の変数countoryフォルダ(今回はUKで指定済み)内のtitle(これも先ほど指定済み).htmlを別タブで開く
というクリックイベントになっています。


    //ZOOMのピン
    for(var i = galQuan ;i< galQuan + zoomQuan;i++){
     marker[i].addListener('click', function(event,name) {
    		if(map.getZoom() < 8){
    			map.setZoom(8);
    			map.setCenter(new google.maps.LatLng({lat:this.lat, lng:this.lng}));
    		}else if (map.getZoom() < 11) {
    			map.setZoom(11);
    			map.setCenter(new google.maps.LatLng({lat:this.lat, lng:this.lng}));
    		}else if (map.getZoom() < 13) {
    			map.setZoom(13);
    			map.setCenter(new google.maps.LatLng({lat:this.lat, lng:this.lng}));
    		}else if (map.getZoom() < 16) {
    			map.setZoom(16);
    			map.setCenter(new google.maps.LatLng({lat:this.lat, lng:this.lng}));
    		}	else if (map.getZoom() < 40) {
    			map.setZoom(Zoom);
    			map.setCenter(new google.maps.LatLng({lat:center.lat,lng:center.lng}));
    		}
    	});
    }
  

ここではズームピンをクリックすることで段階的に拡大率を上昇させ、最後に元の拡大率まで戻す。という機能を付けています。拡大率が8以下なら8まで、11以下なら11まで拡大という形です。
そして16以上になるとはじめに設定した初期の拡大率に戻ります。40という値は特に意味はなく、100でもなんでも大きい数字なら問題ありません。


  //ZOOMのピン変更--------------------------------------------------------------------ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  if (windowWidth <= windowSm) {
      //横幅640px以下のとき(つまりスマホ時)に行う処理を書く
  		google.maps.event.addListener(map, 'zoom_changed', function(e){
  			const currentzoom = map.getZoom();
  			if(currentzoom >= 16){
  				let icon = {
  					url: "./mapProject/pin-image/zoomOut.png",
  					size: new google.maps.Size(40,40),
  					origin: new google.maps.Point(0,0),
  					anchor: new google.maps.Point(16,16),
  					scaledSize: new google.maps.Size(40,40),

  				};
  				for(var i=galQuan;i< galQuan + zoomQuan;i++){
  					marker[i].setIcon(icon);
  				}
  			}
  		});
  		google.maps.event.addListener(map, 'zoom_changed', function(e){
  			const currentzoom = map.getZoom();
  			if(currentzoom < 16){
  				let icon = {
  					url: "./mapProject/pin-image/mainPin.png",
  					size: new google.maps.Size(40,40),
  					origin: new google.maps.Point(0,0),
  					anchor: new google.maps.Point(16,16),
  					scaledSize: new google.maps.Size(40,40),

  				};
  				for(var i=galQuan;i< galQuan + zoomQuan;i++){
  					marker[i].setIcon(icon);
  				}
  			}
  		});

  } else {
      //横幅640px超のとき(タブレット、PC)に行う処理を書く
  		google.maps.event.addListener(map, 'zoom_changed', function(e){
  			const currentzoom = map.getZoom();
  			if(currentzoom >= 16){
  				let icon = {
  					url: "./mapProject/pin-image/zoomOut.png",
  					size: new google.maps.Size(80,80),
  					origin: new google.maps.Point(0,0),
  					anchor: new google.maps.Point(16,16),
  					scaledSize: new google.maps.Size(80,80),

  				};
  				for(var i=galQuan;i< galQuan + zoomQuan;i++){
  					marker[i].setIcon(icon);
  				}
  			}
  		});
  		google.maps.event.addListener(map, 'zoom_changed', function(e){
  			const currentzoom = map.getZoom();
  			if(currentzoom < 16){
  				let icon = {
  					url: "./mapProject/pin-image/mainPin.png",
  					size: new google.maps.Size(80,80),
  					origin: new google.maps.Point(0,0),
  					anchor: new google.maps.Point(16,16),
  					scaledSize: new google.maps.Size(80,80),

  				};
  				for(var i=galQuan;i< galQuan + zoomQuan;i++){
  					marker[i].setIcon(icon);
  				}
  			}
  		});


  }

  	}

そして最後は拡大率に応じてZOOMピンの画像が変更されるようになっています。拡大率を初期値に戻す際、ZOOM OUTとひょうじしたかったので、実装しました。
仕組みは単純で、現在の拡大率を取得し、16以上になったら新しい画像でピンを生成しなおす、というものです。こちらもピンの大きさを分ける必要があったので、if構文で画面の大きさで場合分けしてあります。

スポンサーリンク

終わりに

以上がうちのサイトで使ってる地図の中身になります。なんといっても初心者が見様見真似で作ったものですのであまりきれいに書けてはいないと思いますが、 なかなかたくさんの機能を付けて、かつ変数の使用により転用するときに変更する部分がほとんどないという点で使いやすいかと思います。何かわからないこと、疑問点、アドバイスがあればこちらのメールアドレスまでご連絡ください!
zeroinch.world@gmail.com

おまけ

さいごにまだ開発中のため実装していない機能をご紹介
HTML要素のボタンをクリックすることで対応するピンを中心に地図がズームする機能です。観光地の名前のボタンを作って、地域ごとにまとめて設置しようと考えております。まずはHTML要素から


<button class ="gmap_btn" onclick="AttentionMarkar(0);"/>ビッグベン</button>
<button class ="gmap_btn" onclick="AttentionMarkar(1);"/>ブレア城</button>
        

このままだと簡素なボタンなので、CSSでおしゃれにしようと思っています。
次にJSコードです。


for (var i = 0; i < placeName.length; i++) {
function AttentionMarkar(i){
map.setZoom(9);
map.setCenter(new google.maps.LatLng({lat:placeName[i].lat,lng:placeName[i].lng}));
  }
};
        

AttentionMarkarというidをHTMLから取得、さらにiに入った数字からピンの情報を取得して画面の中央に持ってきます。倍率は9を指定しています。
ただこれだとHTMLのほうにすべてのボタンを作っていかないといけないのが面倒なんですよねえ。まあどうしようもなさそうなんですが・・・だれかいい方法あったら教えてください・。
というわけで以上になります。良ければ参考にしてみてください!

スポンサーリンク