[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:
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-
Google Map API version 3 Overlay Example3 | 株式会社フォレスト・コンサルタンツ
「Google Map API version 3 Overlay Example」「Google Map API version 3 Overlay Example2」の続きです。 今回は、InfoWindow（吹き出し）を表示する際、選択したOverlayを強調してみます。 Google Maps API v3 Example: Overlay4 tika.tisoku.net/overlay/?id=4 追加されたのは「OverlayBackground(num)」と「OverlayBackgroundNo(num)」。zIndexで表示順を、backgroundで背景色を変更しています。 【ソース】 Google Maps API v3 Example: Overlay4 <html> <head> <meta http-equiv="content-type" content="
Google Map API version 3 Overlay Example2 | 株式会社フォレスト・コンサルタンツ
にある通り、「map」上において指定された「id」のInfoWidowをopenし、以前に開かれていたInfoWidowについては閉じるという処理を行っています。 取り合えず、これでMarkerを使うことなく、InfoWindowを開くことができるのですが、注意点が２つあります。 IE6などでメモリリークが発生する。 InfoWidowを開いた際に、地図画面が動いた場合、新たにOverlayをクリックしてもInfoWidowが開かない場合がある。 前者については、回避方法が思い浮びません。公式サンプルの「Google Maps JavaScript API v3 Example: Info Window Simple」code.google.com/intl/en/api... でも、IE6でInfoWidowを開くとメモリリークが発生するので仕方ないのかも。 後者は、「google.ma
Google Map API version 3 Overlay Example | 株式会社フォレスト・コンサルタンツ
最近、Google Map APIを活用することが多いのですが、最新版のversion 3（v3）に関する日本語の情報が少ないので結構苦労しています。 v3を使用した実感としては、version 2と比較して、地図の描画速度が速いです。ただし、私の記述方法がダメダメなためか、大量のMarker（マーカー）を使うと遅くなってしまいます。 と言うことで、Markerと同様に使え、描画速度が速いような気がするOverlay（オーバーレイ）を活用することにしました。以下、簡単なサンプル。 Google Maps API v3 Example: Overlay1 tika.tisoku.net/overlay/?id=1 地図を読む込むたびに、１０個のOverlayを、その地点の緯度経度と共にランダムに表示させるようにしています。 ポイントは「AddOverlay.prototype = new g
もうひとつの Marker Manager (hPod)
地図コンテンツを Google Maps で作る時に、いつも悩ましく思っていたことに、たくさんの印（マーカーやポリライン）を置けないということがあった。置ける事は置けるけれども、闇雲に置いてしまうと、地図上がマーカーだらけになったり、ポリラインもそれだけでうちのブラウザの動作を重たくするので、なにかしらの工夫を施さなければならない。 つまるところ、密集するマーカーと、巨大なトラックログの描画、というふたつのテーマが、当初からの大きな課題の二本柱だった。──いっぺんにそれらを置こうとしなければいいのだろうけれど、いっぺんに置きたいのだもの。 ポリラインのほうは、エンコードすることで、劇的に扱いやすくなってひとまずの解決をみた。なにより巨大なトラックログも描画できるレベルになったのが、いち日に、数千トラックポイントを集めて来るじぶんにとっては、革命的だった。 一方、マーカーのほうはどうか。 し
JSON形式を使って全てをマーカー表示する - American Life in the Summertime
以前書いたある地点から指定した距離の施設検索という記事に関連して、追記する。 指定した緯度経度、そして距離を使って、その範囲内にある施設を検索する。 それは以前に記事に書いた通り。 取得したその結果を使って、今度は地図上にマーカーを置く。 その際、JSON形式のデータを試してみる。 例-10 JSON形式のデータを読み込んで、マッピングする - Google Maps 活用講座 ここにJSON形式のデータを使う例が示されている。 今回は以前に取得した内容をJSON形式に置き換えて、それを表示する方法に変更してみる。 データの形式はこんなカンジ。 CREATE TABLE `markers` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `name` VARCHAR( 60 ) NOT NULL , `address` VARCHAR( 8
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Maps API V3でV2時代のclearOverlays()の代替方法はこれでいい？ 質問と回答(Q&A) [okyuu.com]
http://googlemaps.googlermania.com/google_maps_api_v3/
http://homepage.mac.com/hwat/maps/MarkerReducer/
google-maps-utility-library-v3 - Project Hosting on Google Code
http://googlemaps.googlermania.com/google_maps_api_v2/map_example_12.html