どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae

googlemapAPIでマウスホイールによるズームの動きが邪魔？ googleマップをWebサイトに設置した時、マウスホイールでズームさせたりすると、コントローラーでいちいち動かさなくても楽ちんです。 ですが、ブラウザをマウスホイールでスクロールしていった時にマップにあたると、ブラウザのスクロールが止まってしまいマップがズームされてしまうなんて事があります。 ホイールでのズームは楽ですが、デフォルトの表示を大きめにしておけばさほどホイールで動かく事も少ないのではないでしょうか。 zoom：1；くらいから引いた表示で見る事なんてほぼ必要ないでしょうし、ホイールをグリグリしまくる程ズームする事も現実あまりありません。 ですので、マウルホイールによるズームが不要の場合は動きを無効化しちゃいましょう。

8月28 google maps api で地図を作った時にスマホでみるとスワイプ時のスクロールがmapに取られちゃうのを解決する カテゴリ:javascriptiphone/ipadサイト Tweet googlemapをiphoneやandroid用のスマホページに設置したときに、 でかい地図をおくと、サイトをスクロールしたいのにマップ内がスクロールしちゃって困るみたいなことあるじゃないですか。 google maps apiで指で動かしても動かないようにする設定ないの？ ぐぐっても出て来ないよ！ で、調べてみたらあった。 draggableという設定。 マウスで地図をドラッグして移動する昨日を有効にするか無効にするか、というのを選べる。 無効にすると、スマホでみたときに、スワイプでのスクロールがmapにとられちゃうことがない。 書き方は以下の感じ var opts = { zoom:

Google が新しい Google Maps Embed API を公開しました。 埋め込む地図の URL に様々なパラメータをつけることで、ルート案内や周辺検索など、様々なカスタマイズを簡単に行いつつ、Web ページ上に地図を表示することが可能です。 Adding the new Google Maps to your website just got easier with the new Google Maps Embed API ： Google Geo Developers Blog Google Maps Embed API ： Google Developers Google Maps Embed API - Developer Guide 埋め込みコード生成用のページも用意されています。下記にアクセスしてみましょう。 Google Maps Embed API -- Ge