API

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

google map api でオリジナルのマーカーアイコンをクリックでマーカー画像を変える

google map apiをつかって、マップにオリジナルのマーカー(ピン)画像を設置することはよくある。

今回は、そのマーカー画像をクリックしたら画像が変わる
というのをやらないといけなくなって、英語サイトみにいったり、1時間ほど苦労したので、簡単に張っておくね。

//普通のマップ制作
var myLatLng = {lat: -25.363, lng: 131.044};

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});

//ここからオリジナルマーカーのセット。marker1a.pngという画像をマーカーにする
var marker = new google.maps.Marker({
position:  myLatLng,
map: map,
icon:{
url:'marker1a.png',
anchor:new google.maps.Point(10,10)  //①
}
}));

//ここからクリックでマーカーの変更 クリックでmarker1b.pngに変更
google.maps.event.addListener(marker, 'click', function() {
marker.setOptions({
icon:{
url:'marker1b.png',
anchor:new google.maps.Point(20,20) //②
}
});
});


途中まではいろいろなサイトで説明されてるのでいいと思う。

ポイント1は①の支点をずらすやつ。ふつうのピン画像みたいに真下に向かって突き刺さる感じのピンならこの行はいらない。10,10になっているところはとりあえず、(0,0)にしておけばいい。

 
最後の6行くらいがクリックで画像をかえるやつ。
marker1a.pngをクリックしたらmarker1b.png に変えるんだね。

でもここで②が必要になることがある。

切り替わったマーカー画像のサイズが変わったり形が変わったりすると、ピンの先の部分が示したい地図上の座標からずれちゃうことがある。

そういうときにこのanchorの部分の数字をかえて、支点をずらす 必要がでてくる。

とりあえずいろんな数字いれてみて、ちょうどいいところを見つけるといいと思う。

bye- 

google map api でつくったマップをiphoneのsafariでみると動かせない

マップは表示される。
pcで見ても問題ない。

iphone実機のsafariで見ると、スワイプしてもマップが動かないし、
ピンチイン/ピンチアウトでのマップの拡大縮小もできない。

どうやらタッチイベントそのものが動かないっぽい。

原因は、apiの呼び出し部分にあるようで。

apiを呼び出すこの部分

<script async defer src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&signed_in=true&callback=initMap"></script> 

sined_inというパラメータがある。

google mapにログインした状態でユーザーが見られるようにするものだと思う。

これがtrueになってると、iOS10ではアイコン部分がうえにかぶさっちゃうのか、マップ部分のタッチイベントが効かなくなってしまう。

なので、この機能をfalseにする↓

 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&signed_in=false&callback=initMap"></script> 

そしたらiphoneのsafariで動くようになった。


なんだろ。

 

グーグルマップの使い方

グーグルマップのお仕事が来たので、覚えながらやることにする。

まず、約にたっているのはこちらの記事

・言語も設定できる!これで英語ページでは英語のマップを出せる。
http://www.ajaxtower.jp/googlemaps/charset/index5.html


①「地図にマーカーを表示する」googlemap活用講座
http://googlemaps.googlermania.com/google_maps_api_v2/2-1.html

地図上に置かれるピンはオリジナルのものにしたい。そこでこちら
②「マーカーをオリジナル画像にする」googlemap活用講座
http://googlemaps.googlermania.com/google_maps_api_v2/2-2.html


できた。

コントローラーをいろいろ追加したい。

③googlemapを活用しよう。中断あたり。
http://kikuchisan.net/gmap/

できた。


つぎにピンをクリックしたら吹き出しが出るようにしたい。

④「マーカーを押すと吹き出しを表示してみる」 googlemap活用講座
http://googlemaps.googlermania.com/google_maps_api_v2/2-3.html


⑤緯度経度を地図から調べる
http://www.ajaxtower.jp/googlemaps/gmap2/index4.html

噴出しの角Rが強すぎるので調整したい。
・・けど、これはぐぐっても見つからず。あきらめよう。

次に、xmlからデータを取得して、マップに表示する。


⑥「XMLファイルを読み込んで、地図上にマーカーをマッピングする その2」
http://googlemaps.googlermania.com/google_maps_api_v2/map_example_9.html


難しくなってきた・・。
とりあえず、xmlデータをコピペして、jsもそのままコピペならいけるけど・・。


次は絞り込みをしたい。



⑦「セレクトボックスで選択したマーカーを表示する」
http://googlemaps.googlermania.com/google_maps_api_v2/map_example_31.html

よくわからないが、KMLというのを使うといいのかも


⑧KMLチュートリアル
http://code.google.com/intl/ja/apis/kml/documentation/kml_tut.html


オリジナルアイコンを使いながらKMLでやりたい

⑨KMLでマーカーの画像を変更する
http://googlemaps.googlermania.com/google_maps_api_v2/map_example_37.html



⑩位置情報をとるならsensor=trueにする
http://www.ajaxtower.jp/googlemaps/charset/index4.html

つづく

記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ