はじめに
- ピンに情報を埋め込む方法
- 他のピンをクリックした時
- cssで装飾
- 最後に
ピンに情報を埋め込む方法
ピンに情報を埋め込む方法は私の一個前の記事で紹介しています！
ぜひ参考にしてください！
https://qiita.com/Ryunosuke-watanabe/items/48c8ec80f87283cc0006
今回は前回立てたピンをクリックしたあとに、他のピンをクリックしたときの挙動を施します。
複数のピンが乱立していると見えにくいので、2個目のピンをクリックしたときに他のピンは消えるようにしましょう。
他のピンをクリックした時
htmlとcssは前回と同じです。
maps.html
<html><head><metacharset="UTF-8"><title>map</title><linkrel="stylesheet"href="css/style.css"></head><body><divid="map"></div><script src="js/map.js"></script><script src="data/place.json"></script><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZUNbx_85VM6LurRVIHZcxl-7Vg3O2C9g&callback=initMap"asyncdefer></scriptsrc>></script></body></html>style.css
body{height:100%;width:100%;}#map{height:100%;width:100%;}JavaScriptの方で操作していきます。今回はみやすいようにJSONのデータを配列として記載しておきます。
データのballoonのなかに紹介文を本来は記載しますが、ホゲホゲとしておきます。
map.js
varmap;varmarker=[];varinfowindow=[];varCenter={lat:24.4064,lng:124.1754};varplace_data=[{"loc":"バンナ公園","lat":24.375031,"lng":124.160795,"balloon":"hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge"},{"loc":"石垣島鍾乳洞","lat":24.361743,"lng":124.154466,"balloon":"test"},{"loc":"石垣やいま村","lat":24.40489,"lng":124.144636,"balloon":"test"}]functioninitMap(){map=newgoogle.maps.Map(document.getElementById('map'),{center:Center,zoom:11.5});markerset()};functionmarkerset(){for(vari=0;i<place_data.length;i++){marker[i]=newgoogle.maps.Marker({position:{lat:place_data[i].lat,lng:place_data[i].lng},map:map,title:place_data[i].loc});infowindow[i]=newgoogle.maps.InfoWindow({content:'<div class="mapsballoon"><h2>'+place_data[i].loc+'</h2>'+place_data[i].balloon+'</div>'});markerEvents(i)}}varopened=place_data.length+1;functionmarkerEvents(i){marker[i].addListener('click',function(){if(opened!=place_data.length+1){infowindow[opened].close(map,marker[opened]);}infowindow[i].open(map,marker[i]);opened=i;});}openedという新しい変数を用意しておきます。そしてif文で2回目以降マーカーをクリックしたときに前回開いたマーカーを消すという作業をしています。これで二つ目のマーカーをクリックしたとき最初のマーカーは消えます。
ですが、紹介文があまりに長いとこのような感じでwindowが横長になってしまいます。なのでcssで変更を施していきたいと思います。
cssで装飾
実はJavaScriptでdivでballoonの中を囲ってあるので、class名のmapsballoonを指定して装飾することができます。
style.css
body{height:100%;width:100%;}#map{height:100%;width:100%;}.mapsballoon{width:150px;height:auto;}横幅を150pxに指定、高さをautoにしておきました。そうすることで、横長くなることがなくなります。
こんな感じになりました！！
最後に
いかがだったでしょうか？前回の予告通りピンを立てる際の工夫を施しました。次回はピンにラベルをつけていきたいと思います！