Google Maps JavaScript APIの使い方まとめ
公開日: 2015/09/01 | 更新日: 2017/07/05 Googleが提供する、Google Maps JavaScript APIを利用して、ウェブページに地図を表示させる方法を説明します。通常の埋め込み型の地図とは違い、コントローラの調整、マーカーや吹き出しを配置したりなど、機能が満載です。 Google Maps JavaScript API V3 ReferenceGoogle Maps JavaScript API V3 ReferenceGoogle Maps JavaScript APIの公式リファレンスです。全てのメソッド、オプションなどについての解説が掲載されています。準備 (APIキーの取得)Google Maps JavaScript APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。 アカウントの用
Googleマップ KML/CSV相互変換
GoogleマップからエクスポートしたKMLをCSVに変換します。また逆にCSVをKMLに変換します。 使い方 KMLをエクスポート You Look Too Coolを確認ください。 KMLからCSVに変換 保存したファイルを開き、すべてをコピーします。 上のテキストボックスのうち左のテキストボックスに貼り付けます。 「KMLからCSVに」をクリックします。 右のテキストボックスにCSVが表示されます。 テキストエディタ等に貼り付け、拡張子を「.csv」として保存してください。 CSVからKMLに変換 CSVは「整理番号,場所の名前,説明,経度,緯度,標高」の順にします。整理番号は必須ですが値は任意です。 上のテキストボックスのうち右のテキストボックスに貼り付けます。 「CSVからKMLに」をクリックします。 左のテキストボックスにKMLが表示されます。 テキストエディタ等に貼り付け、拡
Google Maps API v3で表示した地図にマーカーを表示する
Google Maps API v3で表示した地図にマーカーを表示する方法を紹介します。 １．はじめに 「Google Maps API v3を使ってウェブサイトやブログに地図を表示する」では地図を表示するサンプルコードを紹介しました。 サンプルコード <script> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById('map'); var myOptions = { zoom: 15, center: new google.maps.LatLng(35.689779, 139.700381), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, }; var map =
GoogleMapの簡単な埋め込み方法。アイコンやデザインのカスタマイズも！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされた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
新しいGoogleマップをレスポンシブ対応で埋め込む方法 | ライフハッカー・ジャパン
Digital Inspiration：新しくなったGoogleマップでは、ウェブページに地図を埋め込むことが可能となりました。Googleマップのサイトを開き、埋め込みたいエリアをズームインします。右下の歯車アイコンをクリックして、メニューから「地図を埋め込む」オプションを選択すれば、埋め込みコードを取得できます。 埋め込みコードを使ったサンプルページがこちらです。デフォルトでは、Googleマップがレスポンシブに対応していません。スマートフォンなどでページを開くと、地図のサイズがデバイス画面にフィットせず、はみ出してしまいます。 同じGoogleマップをレスポンシブ対応で埋め込んだサンプルがこちら。ブラウザをリサイズしたり、スマートフォンからページを開いても、画面に合わせて地図のサイズを自動調整してくれます。 Googleマップをレスポンシブに埋め込む方法 以下がGoogleマップのデ
Processingでお手軽にGoogleマップから画像を取得する - Imaginary Code
Google Mapper for ProcessingというGoogleマップから地図画像を取得するためのProcessing用のライブラリがあります．ごくシンプルな機能しかありませんが，とても簡単に扱えるので遊んでみてください． 使い方 上記の配布サイトに行くと，Downloadと書かれたところに投げやりにjarファイル（googleMapper.jar）が置いてあるので，それをダウンロードします．Processingを起動して，スケッチ上にgoogleMapper.jarをドラッグ＆ドロップすればそのスケッチで利用可能になります．普段使いするならば，Processing/libraries/googleMapper/library/というフォルダ構成を作ってそこに置くのが良いでしょう． コードはこんな感じです．短い．恐ろしく短い．何の冗談かと． import googlemapper
GoogleマイマップをiPhoneマップで見る方法
※2011/4/27現在 以下の方法は利用できません。ウェブ版のGoogleマップを使うとマイマップにアクセスできます。詳しくは以下の記事をどうぞ。 新・GoogleマイマップをiPhoneで見る方法: おとうさんのつれづれLifehack（ライフハック） これまで行ったお気に入りのお店とか、今度のおでかけで巡りたいスポットとか、Googleマイマップに自分のマップを作っておくと便利ですよね。そんなマイマップをiPhoneで見るにはMy Mapsです。 便利なGoogleマイマップをiPhoneでも使いたいならMy Maps グーグルとアップルの仲の悪さだからなのか、対応しても良さそうなマイマップの機能がiPhone／iPod touchでは使えません。 ググッてみるとこんな方法がスタンダード。 Going My Way: Google Maps の マイマップを iPhone から利用す
マップタイプ | Maps JavaScript API | Google for Developers
フィードバックを送信 マップタイプ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このドキュメントは、Maps JavaScript API を使用して表示できる地図の種類について説明します。この API は、MapType オブジェクトを使用してこれらの地図に関する情報を保持します。MapType は、地図タイルの表示と使用、またスクリーン座標から地図上のワールド座標への座標系の変換を定義するインターフェースです。各 MapType は、タイルの取得と解放を処理するためのメソッド、およびその視覚動作を定義するプロパティをいくつか含んでいる必要があります。 Maps JavaScript API にあるマップタイプの内部動作は高度なトピックです。多くのデベロッパーにとっては、以下に説明する基本のマップタイプを使用すれば十分です。一方、スタイル付き地図を使
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた
なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ
マーカーのドラッグ＆ドロップでGoogle Mapsの緯度経度を測定｜Geocoder
Geocorderについて Google Mapsを利用して、任意の場所の緯度経度を測定できるツールです。 マーカーを任意の場所に設置できるので、詳細な緯度経度の測定が可能です。マーカーは複数設置でき、一度設置したマーカーを動かす事が可能です。 プライバシーポリシー 使い方 マップをクリックすると、マーカーが表示され吹き出しの中に緯度経度が表示されます。 別の地点をクリックすると新たなマーカーが表示されます。先に表示されているマーカは消えません。 マーカーをクリックすると吹き出しの表示 / 非表示が切り替わります。吹き出しは同時に表示させる事ができません。 一度表示されたマーカーはドラッグする事で動かせます。 「目的地」に住所やランドマーク（ex. 東京タワー、大阪城、etc...）を入力すると、地図が移動しそこを中心に設定します。 役立つ時 マッピングしている住所は合っているのに建物が違
Google マップのデザインが新しくなりました
メディア関係者向けお問い合わせ先 メールでのお問い合わせ: pr-jp@google.com メディア関係者以外からのお問い合わせにはお答えいたしかねます。 その他すべてのお問い合わせにつきましては、ヘルプセンターをご覧ください。
Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」:phpspot開発日誌
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
Movable Typeの記事投稿画面にGoogle Mapsを表示｜Blog｜Skyward Design
Shimalogに写真を掲載する際、撮影場所をGoogleマップで示すために緯度・経度を入力しているのですが、毎回他のサイトで緯度・経度を調べてコピーしてくるのがとても手間でした。 そこで、「Web creators 2009年2月号」を参考にし、Movable Typeの記事投稿画面をカスタマイズ。Google Mapsを表示し、マーカーで指定した撮影場所の緯度・経度を、カスタムフィールドに自動入力するようにしました。 カスタマイズは、Web creatorsとGoogle Maps APIを読むことで、スムーズに完了しました（MDNのサイトにサンプルがあることは知りませんでした...）。工夫した点の一つは、Shimalogで示すポイントは全て沖縄県内なので、デフォルトで沖縄県全域がGoogle Mapsで表示されるように設定したこと。同じウインドウ内でスピーディーに地図を操作でき、なお
Google Maps API を使って、地図のカラーバリエーションを楽しもう。
メディア関係者向けお問い合わせ先 メールでのお問い合わせ: pr-jp@google.com メディア関係者以外からのお問い合わせにはお答えいたしかねます。 その他すべてのお問い合わせにつきましては、ヘルプセンターをご覧ください。
Googleマップ待望の新機能「ルート案内API」の使い方 (1/3)
6月19日、Googleマップ日本語版に「ルート案内API」が追加されました。ルート案内APIを使うと、設定した出発地から目的地までの経路を地図上に簡単に表示できます。 たとえば、企業のWebサイトに最寄駅から自社までの道案内を掲載したり、観光名所を巡るツアーガイドのサイトを作ったりと、さまざまな利用が考えられます。もちろん静的なWebページだけでなく、ユーザーが入力した出発地点から目的のお店までの行き方を検索する、といったWebアプリケーションにも活用できます。 ルート案内APIの基本的な使い方 ルート案内APIの基本的な使い方を手順を追って紹介しましょう。 1. APIを使う準備をする Google Maps APIにはVer 2.xとVer 3がありますが（関連記事）、ルート案内APIはVer 2.xの最新版で使用できます。Ver 2.xの最新版を使うには、HTMLに以下のタグを追加
Shawn Mayzes - Google Maps jQuery Plugin
Google Maps jQuery Plugin - Shawn Mayzes Welcome to the developer documentation for the jQuery Google Maps Plugin! The Google Maps jQuery Plugin lets you simply embed Google Maps using The Google Maps JavaScript API in your web pages. To useThe Google Maps JavaScript API, you need to first sign up for an API key. Once you've received an API key, you can develop a map application following the inst
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ - NAVER まとめ
ushigyunet｜iPhoneからゲームやグルメまで、ひたすら詳しくレビューするブログ
IDEA * IDEA
