マークアップエンジニアとか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で動くようになった。


なんだろ。

 

ゼロから戦力になるまでの最短ルート

コーディング(マークアップ)を教えることがよくあるんだけど、
いつも、どういう手順で教えたら最短でその人が戦力になるか、考えることが多い。

「戦力になる」 についても3つくらいのフェーズになる。


【第1フェーズ】流し込みや下層展開、修正などを行える。
トップページのcss設計はまかせられないけれど、コーディングで出てくる各種の作業を分割してお願いできることで、 css設計できるコーダーのリソースをあけることができる。


【 第2フェーズ】cssとhtmlのパターンを大体覚えてcss設計からできる。
案件がスタートしたら最初から最後までコーディングができる。
jqueryライブラリを使ってタブ切り替えやスライダー、モーダル程度なら苦戦せずに導入できる。
pc/sp/レスポンシブサイトの一通りの知識がある。


【第3フェーズ】 プロジェクト管理ができる。トラブル解決ができる。理想的なソースが作れる。
案件の依頼があったときにどのようなリソース配分で完了するか、
クライアントをどう導けばオンスケで進むか、が想定できる。
ブラウザごとやデバイスごとの不具合などのトラブル例と解決パターンをひととおり経験していて、ハマらずに解決できる。
クライアントの指示にないがやっておいたほうがよい対策やソースの組み方ができる。


------------------
第3フェーズにいくには最終的にとにかく場数を踏むしかないかもしれない。
まずは、第1フェーズの戦力になってもらうためにどういう手順で学んでいってもらえば早いのか、というのが課題。


タイピングはできるが0からhtmlを学ぶという人の手順を考えてみた。

①ドットインストールのhtml入門をひととおりやろう。
②↑で出てきた全タグを使って、自分の好きな映画の紹介ページを作るテスト。
③ドットインストールのcss入門をひととおりやろう。
④映画紹介ページにcssをほどこす。
⑤サンプルデザインを参考に、どういうときにどういうタグを使えばよいかを教える。
 <li>タグや<div>の入れ子の仕方あたりがポイントになりそう。
⑥インデントルール、美しいソースの作り方を教える。html/cssそれぞれ。
⑦psdからのスライスのやり方、拡張子のルール、命名規則を覚えてもらう。
⑧デザインチェックのやり方を覚えてもらう。
 余白の大きさやフォントサイズや色を厳密にチェックし、cssで調整していく方法。
⑨サイトの種類と注意点概要を覚えてもらう。
 pc/sp/レスポンシブサイトの特徴と注意点。静的サイト/動的サイトの特徴と注意点。
⑩chrome検証の使い方とその場でのcss修正の方法を覚えてもらう。


あと3つくらいはあるかもしれない。
今のところ実際におしえていて良さそうな手順は上記の順番。

ここまで覚えてもらうと、
psdからスライスしてhtmlを仮組してもらったり、
雑に組んだcssを、デザインにきっちり合わせてもらったり、複雑でない下層ページをまるまるまかせてしまえたりする。
これは結構戦力になる。

理想は入社して2週間くらいでここまで身につけてもらうこと。
覚えるだけじゃなくて、実践で使える程度に身につけてもらえるカリキュラムを作れたら良いな。


 
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

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

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

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ