2017/07/05 Google Mapsを自分のサイトやブログに埋め込んで表示できる「Google Maps Embed API」の使い方をまとめています。JavaScriptを利用しないので、プログラミングが苦手な方でも手軽に利用できます。 Google Maps Embed APIGoogle Embed APIの公式リファレンスです。詳しい仕様、プログラミング方法などを確認できます。準備 (APIキーの取得)Google Maps Embed APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。 アカウントの用意APIキーを取得するためには、Googleのユーザーアカウントが必要です。まだ持っていない人は作成して下さいね。 Googleアカウントの作成Googleのアカウントを作成するには、このページから操作を行なって下さい。
こんにちは。エンジニアののびすけです。 最近、同じくエンジニアのまろ氏が目立ってきて焦っています。 先日、Google Mapsのライブラリであるgmaps.jsを使った 「Web初心者でもGoogle Mapsをカスタマイズできるgmaps.jsでAPIを使い倒そう!」 とmilkcocoaを使った 「インタラクティブコンテンツを作ろう!milkcocoaで5分のチャットアプリ制作」 を書きました。 Web上の地図表現とインタラクティブな表現。 これらを使って何かをやりたいとは思ったのですが、アイディアが無いので(誰かください)今回はこの2つの技術を組み合わせて、エンジニアのまろ氏の現在地をGoogle Maps上にリアルタイムに反映してみたいと思います。 今回はこれを1時間弱程度で作りました。milkcocoaとgmaps.jsは便利っすなぁ。 作ったものの構成イメージ 上のような構成
「「Google Maps Anywhere」から「Simple Map」へ移行」への1件のフィードバック 丁度移行する必要がある機会があったので、参考とさせていただきました。 functions.phpへフィルタを追記すればDBの変更なしでも変換できそうではあります(未検証ですが) function googlemap_to_map($text) { if ( preg_match("/\[googlemap/",$text) ){ $text = preg_replace("/\[googlemap/", '[map', $text); $text = preg_replace("/\[\/googlemap\]/", '[/map]', $text); } return $text; } add_filter('the_content', 'googlemap_to_map', 1)
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
TimeMapは、SIMILE TimeLineとGoogleMapsをコラボレートしたJavaScriptのライブラリーです。 時間軸と空間軸を1つにしたら面白いという発想は、フツーにありますが、表現するのは結構むずかしいです。 でも、TimeMapは、そのあたりをうまく処理しています。 TimeMapは、SIMILE TimeLineとGoogleMapsが出発点です。 SIMILE TimeLine GoogleMaps TimeMap パーソナル タイムマップ (まだ工事中) タイムマップ twitter (現在工事中) TimeMap 京都 TimeMap 京都II TimeMap 京都 エディター TimeMap 京都 エディター デモ タイムトンネル 時系列予測 ガンバ大阪 スケジュール タイムマップ その他 トップページ| サイトマップ| SIMILE TIMELINE
なかなかいいサンプルだったのでシェア。 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での実装状態です。 ランドスケープ時も自動で横幅をあ
Static Maps API ãããããã¼ ã¬ã¤ã Google Static Maps API ãããããã¼ ã¬ã¤ãã«ãããããGoogle Static Maps API ã使ç¨ããã¨ãçããã®ã¦ã§ããã¼ã¸ã«ã Google ãããã®ç»åãåãè¾¼ããã¨ãã§ãã¾ããJavaScript ãåçãªãã¼ã¸ã®èªã¿è¾¼ã¿ã¯ä¸è¦ã§ããGoogle éçããããµã¼ãã¹ã¯ãæ¨æºã® HTTP è¦æ±ã«ãã£ã¦é
ナビゲーションのホバーに合わせて、Google Mapsとパネルの表示を切り替えるスクリプトを紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <li data-geo-lat="41.9786" data-geo-long="-87.9047"> <h3>O'Hare Airport</h3> <p>Flights n' stuff</p> <p class="longdesc"><strong>About:</strong> O'Hare International Airport has been voted the "Best Airport in North America" for 10 years by two separate sources: Readers of the U.S. Edition
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く