google map apiをつかって、マップにオリジナルのマーカー(ピン)画像を設置することはよくある。
今回は、そのマーカー画像をクリックしたら画像が変わる
というのをやらないといけなくなって、英語サイトみにいったり、1時間ほど苦労したので、簡単に張っておくね。
途中まではいろいろなサイトで説明されてるのでいいと思う。
ポイント1は①の支点をずらすやつ。ふつうのピン画像みたいに真下に向かって突き刺さる感じのピンならこの行はいらない。10,10になっているところはとりあえず、(0,0)にしておけばいい。
最後の6行くらいがクリックで画像をかえるやつ。
marker1a.pngをクリックしたらmarker1b.png に変えるんだね。
でもここで②が必要になることがある。
切り替わったマーカー画像のサイズが変わったり形が変わったりすると、ピンの先の部分が示したい地図上の座標からずれちゃうことがある。
そういうときにこのanchorの部分の数字をかえて、支点をずらす 必要がでてくる。
とりあえずいろんな数字いれてみて、ちょうどいいところを見つけるといいと思う。
bye-
今回は、そのマーカー画像をクリックしたら画像が変わる
というのをやらないといけなくなって、英語サイトみにいったり、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-