新しいGoogleマップをレスポンシブ対応で埋め込む方法 | ライフハッカー・ジャパン
Digital Inspiration：新しくなったGoogleマップでは、ウェブページに地図を埋め込むことが可能となりました。Googleマップのサイトを開き、埋め込みたいエリアをズームインします。右下の歯車アイコンをクリックして、メニューから「地図を埋め込む」オプションを選択すれば、埋め込みコードを取得できます。 埋め込みコードを使ったサンプルページがこちらです。デフォルトでは、Googleマップがレスポンシブに対応していません。スマートフォンなどでページを開くと、地図のサイズがデバイス画面にフィットせず、はみ出してしまいます。 同じGoogleマップをレスポンシブ対応で埋め込んだサンプルがこちら。ブラウザをリサイズしたり、スマートフォンからページを開いても、画面に合わせて地図のサイズを自動調整してくれます。 Googleマップをレスポンシブに埋め込む方法 以下がGoogleマップのデ
Googleマップをもっと簡単に使おう·gmaps.js MOONGIFT
gmaps.jsはGoogleマップを使いやすくするJavaScriptライブラリです。 GoogleマップではJavaScriptのAPIも提供されていますが、使い勝手が良いとは言えません。活用していくならばもっと使いやすいgmaps.jsを利用しましょう。 まず普通の表示。GMapsに位置情報を渡すだけです。超簡単。 イベントも取れます。クリックやドラッグなど様々なイベントが使えます。 マーカーの追加も分かりやすいです。マーカーにイベントをつけるのも簡単。 HTMLコンテンツを表示するのも手軽です。 HTML5の位置情報取得にも対応しています。 住所を検索してジオコーディング。 ドローです。指定は大変ですが。 オーバーレイ表示です。 ルート検索です。二つの位置情報を渡すだけです。 ルート検索をさらにポイントごとに表示していくこともできます。 こちらは静的なマップ。画像として表示できます
Google Mapのデザインを変更する方法（StyledMapの使い方） - KAYAC Engineers' Blog
豚を丸焼きにするイベントで日焼けしました。ago（@kyo_ago）です。 すでにだいぶ時間がたってますが、7/7に弊社コーポレートサイトのリニューアルを行いました。 その際会社までの道順を紹介するページでGoogle Mapのデザインを変更したのでその方法をご紹介したいと思います。 StyledMapType Google Map Ver3以降はStyledMapTypeというAPIが追加されており、このStyledMapTypeを使うことで地図上の指定された要素に対して独自の色情報を設定することができます。 色の変更方法 色を変更するにはStyledMapType API経由で以下のようにJavaScriptのObjectを渡すことで実現できます。 var styles = [ { // 色を変更する対象の指定（document参照） featureType: "road.local"
[JS]Googleマップにさまざまなオプションを追加して簡単に設置できるスクリプト -GMAP3
Google Mapsにオリジナルのマークやポリゴン、任意の画像などを簡単に加えて設置できるjQueryのプラグインを紹介します。 GMAP3 -jQuery plugin to manage Google Map API デモ [ad#ad-2] GMAP3はGoogle Map APIを使用するため、使用するページに外部ファイルとして記述します。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> Googleマップの設置は簡単で、空のdiv要素にidを指定して配置します。 下記に簡単な例を紹介します。 HTML <div id="test1"></div> JavaScript $.gmap3.setDefault({ init:{ center:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
素早く簡単にGoogleマップを導入できるjQueryプラグイン「initmap.js」:phpspot開発日誌
https://jp.techcrunch.com/2012/06/07/20120606google-maps-for-mobile-gets-offline-maps/
