javascript

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


なんだろ。

 

javascriptをつかってブラウザで録音するWEBサイトが作れるのか調べてみた

仕事で調べる必要があって。

HTML5でいろいろできるようになってるっていうし、ブラウザでその場で録音するWEBサイトって作れるのかな?

■つくれる。

こんなデモがあった。
https://webaudiodemos.appspot.com/AudioRecorder/index.html

録音して再生したり音声データをダウンロードしたりできる。

できるね。
 

■Web Audio API というものらしい。

音をいろいろするAPI
http://www.html5rocks.com/ja/tutorials/webaudio/intro/

 
■javascriptライブラリもあった。 

recorder.js
https://github.com/mattdiamond/Recorderjs

rec.record()
rec.stop()
これだけでできんのすごい。
こんど試しデモつくってみよう。

WevAudioRecorder.jsなんていうのもある。
https://higuma.github.io/web-audio-recorder-js/


■問題が。スマホサイトでは使えない。

ひととおり調べてみた限り、スマホではブラウザでの録音ができないっぽい。

https://www.quora.com/How-do-I-record-audio-using-the-iPhone-6-running-on-iOS-8-1-3-microphone-on-the-Chrome-or-Safari-browser

すでにいろいろ試した先駆者がいたようで、いろいろなAPIを駆使したがiphone 6ではsafariから録音ができなかったとのこと。

回答のいち部分を翻訳。


getUserMediaなどrecorder.jsなどのライブラリで使えますが、
mobile Safariは、オーディオキャプチャをサポートしていません
デスクトップブラウザ上で、このための一般的な回避策は、フラッシュを使用することであるが、iphoneではフラッシュが使えません。
そのためゆういつの解決策はネイティブアプリとしてリリースすることです。

オーディオキャプチャをサポートしてないので、できませんよ、と。



PCではできるけど、スマホでできない。

ユーザーが気軽にスマホで遊ぶような録音サイトは作れなさそうかな。



引き続き調査をすすめてる。

 

makeshopのカート画面でお気に入り商品の削除やお気に入り商品を「買い物かごにいれる」がエラーになる

makeshopでは、お気に入りに追加するとカート(買い物かご)の画面にお気に入り商品が一覧表示される。

カート画面をオリジナルデザインで作っていたら、この画面にでてくる
・お気に入り商品の削除ボタン
・お気に入り商品をカートに入れるボタン

の2つが機能しなかった。

管理画面を読み込んでみたけどわからない。

しょうがないので、chromeの検証でコンソールを開いて、jsのエラーを確認して、javascriptから追いかけていって解決。

■結論から

wishlistの商品数入力ボックス(タグで言うと[WISH_QUANTITY] ) 
を記述してないとエラーになるっぽい。

とはいえ、デザイン上お気に入り商品一覧画面で商品数を入力させたくなかったので、ソース上は表示させつつ見た目には見えないようにした。

<div style="display:none">
[WISH_QUANTITY]
</div> 

これで解決!
 

■どうやって見つけたかも書いておく。

①chromeの検証でconsoleをひらいておく。 

②エラーとなる「お気に入りの削除」ボタンをクリック。するとconsoleにエラー文言がでる。
「602行目のvalueがエラーだよ」 
のようなのが出た。

③chromeのソースビューで602行目を探すと
document.getElementById("formwish" + temp).amount.value=0;
このような1文があった。 

④tempというのは上のほうを探っていくと一覧の番号であることがわかる。 ので、valueがエラーということは、id="formwish1"というタグの子要素にamountというのが存在しないためのエラーということがわかる。ソースをみていくと確かにそんなタグは出力されてない。

⑤なんか必要なタグいれわすれてんのかな?と疑って、makeshop独自デザインの買い物カゴ編集画面を見に行く。wishlistのあたりを見ていると、[WISH_QUANTITY]というのがある。
あぁ、amount(=量)って数量のことかってことでためしにこのタグをいれてみたら、解決。 


って感じで探したよ。


 

codekitでjsをmin化させない設定

codekitとう便利なツールがある。
よく使うのだけど、初期設定だと、jsファイルをいじるたびにmin化されたファイルが自動的に吐き出されて、うっとおしい時がある。

クライアントによってはjsをmin化しないでほしいという要望も多いからね
(というかそういうのがほとんど。)

min化させない設定のメモ。

①まず設定変更したいプロジェクトを選択して右クリックで「Edit project setting」
②LanguagesのなかのJavascriptを選択
③Outputstyleを「Non-minified」にする。

これでOK.

ついでに 

check Syntax With を「Nothing」にしておけば、作成中に余計なバリデータが起動しないので静かにコーディングできる。

 
記事検索

リモキュー

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

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

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