Google Maps APIを利用することで、住所から経度緯度を取得して地図上にマーカーを表示させるといったことが可能になりました。 今回紹介するサンプルは、テキストフィールドに住所を入力して「検索」ボタンを押すとその場所に移動し、マーカーを表示させるといったものです。 では早速、全体のサンプルコードを見て頂きます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <t
まずジオコーディングの機能を利用するためのGClientGeocoderクラスのオブジェクトを作成します。コンストラクタ関数は次のように定義されています。 GClientGeocoder(cache?:GGeocodeCache) Google サーバーと直接通信するジオコーダの新しいインスタンスを作成します。 オプションのキャッシュ パラメータにより、不明な住所のカスタムのクライア ント側キャッシュを指定できます。何も指定していない場合、 GFactualGeocodeCache が使用されます。 省略可能な引数であるcasheにはクライアント側で住所から座標への変換表を作成している場合などに指定します。ここでは取り合えず気にしないで下さい。 実際には次のように記述します。 var map = new GMap2(document.getElementById("map")); map.
Rich Gibson & Schuyler Erle著 武舎広幸+福地太郎+武舎るみ訳 GOOGLE MAPS HACKSTM 全体の目次 | O'Reilly | Amazon | 書店 | サイトトップ 追加情報1 Google Mapsが提供するジオコーディング機能 2006年6月13日にGoogle Mapsに米国などの住所に関するジオコーディングの機能が加わりました。 また、2006年12月7日に日本の住所や駅などに関するジオコーディング機能が加わりました。 下のコードのように、GClientGeocoder()というクラスを利用します。 このクラスにgetLatLng()というメソッドがあって、引数には住所と、ジオコーディングが成功したときに呼ばれる「コールバック関数」を指定します(このコールバック関数はもちろん匿名関数でもかまいません)。 var map = new GMa
[追記: 2006/12/08] 日本でも Google Maps API でのジオコーディングが正式にサポートされました。日本では未対応 Google Maps APIで、ジオコーディングが、できるようになったそうです。 ・たたみラボ – Where2.0:Google Maps APIがバージョンアップ。ジオコーディングが可能に 先々週にGoogle AJAX Search APIを使ってジオコーディングする方法を紹介したばかりですが、新しくGClientGeocoderというクラスがGoogle Maps APIに実装されたので、その方法を使う必要もなくなりました。以下に使い方のサンプルを紹介しておきます。なお、この新しいクラスを使うためには、Google Maps APIを読み込むためのスクリプト(ヘッダ部分に記述するやつ)のバージョンを表すパラメータvの値を2.xにしておく必要が
8 人のユーザが現在オンラインです。 (2 人のユーザが 轍 Wadachi を参照しています。) 登録ユーザ: 0 ゲスト: 8 もっと... 概要 Google Mapsとは? これまでウェブ上でツーリングのコースを紹介するには、カシミール3Dなどでトラックを表示させ、画像として保存したものを掲載するしかありませんでした。しかしこの方法では地図の縮尺を変えることができないので、大雑把な情報しか表示することができません。詳細な情報まで表示するには容量が非常に大きくなったり、地図を何枚も載せなければならないという問題がありました。 これらの問題を一気に解決してくれる画期的なシステムがGoogleから提供されました。それがGoogle Mapsです。無償で提供されているGoogle Maps APIという機能を利用すれば、自分のサイトに世界地図を組み込むことができるのです。地図はマ
※html と xml および画像を一括したパッケージのダウンロードはこちら。 (5)XML読み込み - Sample Google Mapsは専門知識のある人でないと出来ないのでは? というような敷居の高さを感じないでもないですが、ここもなるべく平易なひながたにしています。 外部からXMLファイルを呼び出します。マーカーの数が多い場合など、用途はいろいろ=XMLファイル・サンプル ・以下のテンプレートをコピーし、メモ帳などにペーストして★印の箇所を好きなように書き換えてください。「名前を付けて保存」するときは、文字コードを「UTF-8」とすることを忘れずに。 緯度(lat)と経度(lng)はこのツールで割り出してください。 注意: Google Page Creator(googlepages.com)でXMLを使うマップを作る場合、以下の記述に留意しましょう。 var xmlDoc
Google Maps APIを使えば、自分のホームページのコンテンツに地図や衛星写真が組み込めます。 Googleマップは、単に地図がおけるだけでなく、APIを活用して、地図にオリジナルのアイコンを組み込んだり、吹き出しによる案内、あるいは地図にラインを書き込むなどカスタマイズ出来ます。 Google Maps APIを利用するのは、そんなに難しくはありません。 Google Maps APIはJavaScriptで記述されたライブラリなので、JavaScriptが記述できる人なら簡単に利用できると思います。 ほんの少しのJavaScriptコードをWebページに埋め込むだけで、地図が完成します。 JavaScriptが全く分からない方は、下記のJavaScript無料講座で勉強してからこのページを読み進めて頂ければ理解がより深まります。 「JavaScript無料講座」
Google Earth、Google Map で地球散歩。 昔に行って感動したあの場所をふたたび訪れ、 あこがれのあの場所へ思いを馳せる・・・ そしてまた、旅に出よう。 いや、分かったような気がするだけ(笑) ここの解説がうまくまとまってて分かりやすいのでご紹介。 XML.com: Hacking Maps with the Google Maps API Google Maps API を使うときの制限事項: 住所から経緯度を割り出す Geocoding の機能は提供しないので、自分で経緯度データを用意するか、第3者の Geocoding サービスを利用する必要がある ドライブガイドなどの経路探索機能は提供しない Google Maps API key は特定のウェブホストかローカルホストでしか有効でない。ユーザは開発用も含めてウェブサイトを準備する必要がある。 API key は、ウ
Home Google マップ JavaScript API V3 まとめ Google マップ JavaScript API V3 まとめ 地図コンテンツ作成とカスタマイズ例です。現在グーグル Maps Javascript API のバージョンは「V3」で、Nexus などのタブレットや Android スマートフォンにも適しています。 以下のほか、ブログも参照して下さい。このページに未掲載のマップが多数あります。 V2は2010年5月19日、正式に廃止されています。Google はV3への移行(Google Geo Developers Blog: GoV3: It's time to Upgrade)を奨めています。2013年11月19日以降(機能により)使えなくなっています。 2013年5月、ラベル類が更新されました。javascript の冒頭に google.maps.vis
ここでは、Google Maps JavaScript API(version 3)を使って遊ぶ方法を説明したいと思います。 Google Maps JavaScript APIを使うと、グーグル社が提供する衛星写真や地図を使ってホームページ上で色々なものを作れます。 対象とする読者は初心者もしくは入門者です。 Google Maps APIはJavaScriptを使って書いてあるので、JavaScriptの知識があった方がわかりやすいと思いますが、Java Scriptがわからなくても何と無くわかるような説明を目指したいと思っています。 基本編 Google Maps APIの単純な例 地図の種類を切り替える 地図の中心を移動する 地図上にふきだしを表示 地図がクリックされたときの処理 マップタイプコントロールを無効にする 緯度経度取得ツール 要望が多いので緯度経度情報を取得するツールを
携帯(ケータイ)サイト用の簡単なHTML・絵文字一覧・画像の種類を解説します。携帯サイトのHTMLの構造 携帯サイトのHTML構造は、基本的に簡単シンプルにしたPC用のHTML構造と変わりません。 <HTML>から始まり、</HTML>で終わる、いたって普通のHTMLです。 PCサイトとの違いは、TOPページでも説明しましたが、1ファイルサイズの制限、2スタイルシート使用不可、3JavaScript使用不可、4メーカーの規格による違い、になります。 ただ、このサイトでは、各機種共通のページを作成することを推奨していますので、基本的なPCサイトとの違いは先の3つになります。 携帯サイトのHTMLタグ 携帯サイトで使用できるHTMLタグは、原則的にはPCサイトとあまり大差はありません。しかし、全く同じと言うわけではありません。 一番大きな違いは、古い機種だと<table>タグが利用でき
携帯サイトのタグを活用してサイト作成 携帯サイトとパソコン用ホームページはだいたい同じですが、imode独自のタグや、携帯サイトでは使用できないタグがあります。 ここでは、imodeタグについて、パソコン用ホームページとの違いを中心に解説します。 imodeで利用できるタグ imodeで利用できるタグは、 A, BASE, BLOCKQUOTE, BODY, BR, CENTER, DIV, DL(DT, DD), FONT, FORM(INPUT, SELECT, OPTION, TEXTAREA), H1〜H6, HEAD, HR, HTML, IMG, MARQUEE, META, OL(LI), P, PRE, TITLE, UL(LI) です。 使い方はパソコン用ホームページを作るときとほぼ同じです。 ここでは、携帯サイトにおいて使い方が大きく異なるタグについて説明します。 im
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く