Webの記録

Google Maps表示用スクリプト「google_map_api_js」を試してみた♪

投稿日:2012年1月8日 更新日:

この記事は約 5 分で読めます。

map_mini

以前「jquery.gmap3.js」を使ってGoogle Mapsを表示させてみました。(「jquery.gmap3.jsを使って、Googlemapを簡単にカスタマイズ♪」に書いています。)

しかし、IE7での表示が出来なかったので別な方法を探していました。

Google Maps APIを見ていても、ちょっと頭が痛くなりそうです。どなたか良さそうなjsを書いてくれてないかな?と探していたら・・・ありました♪

そんなワケで、「google_map_api_js」を使って、試してみました♪



配布元:「ダリの雑記:WEB版」マップAPI v3で地図とマーカー・バルーンを表示(複数版)

特徴

  • マップのデーターは、htmlファイルでliタグの中に簡単に書くだけ。
  • 住所から座標取得が可能!
  • PHP5.2以上のサーバーで動作。
  • IE7以上で表示出来る。


設置方法

配布元のサイトから「google_map_api_js.zip [version1.4b3]」をダウンロードします。中身は「get_coord.php」、「map_function.php」、「map.js」です。

headerへの記述。

jqueryとmap.js、Google Map APIの読み込みをします。

※metaタグで文字コードをUTF-8にしないと動作しない事があるようです。

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>


bodyタグのonloadで、マップ表示用関数を呼び出し
<body onload="map_all('map','gmap_list')">


マップデーターの記述

liタグの中に表示したいデーターを入れます。件数分のliタグを記述します。

とりあえず、2件分書いてみます。実際はもっと多くて大丈夫です。配布元サイトを参考にしてください。

<ul id="gmap_list">
	<li>
<div class="gmap_title"><a name="gmap_title"></a>ギャロップ小倉</div>
<div class="gmap_info"><span class="gmap_address">北九州市小倉北区魚町1-1-1</span>

レッスン曜日:火・水・金・土</div>
<div class="clear"></div></li>
	<li>
<div class="gmap_title"><a name="gmap_title"></a>小倉南センター</div>
<div class="gmap_info"><span class="gmap_address">北九州市小倉南区徳力5-4-1</span>

レッスン曜日:隔週 土・日</div>
<div class="clear"></div></li>
</ul>


データーの下に地図の読み込みの為のコード記述

widthとheightで、地図のサイズを指定します。

<div id="map" style="width: 500px; height: 500px;"></div>
<div class="clear"></div>


スタイルシートで整える

cssで細かい部分の表示を整えます。cssも配布元でダウンロード出来るので参考にすると良いです。

GoogleMaps表示イメージ

とりあえず、こんな感じでざっくり作りました。IETesterでIE7の表示を確認したところ、ちゃんと表示出来ました♪

余力があれば・・・。

ダウンロードした「map.js」を開き、11~14行目の初期値の経度を変更してみてください。

そのままで使うと、地図を読み込む時に一瞬違う場所の地図が出ます。

変更方法は、座標をコチラで地図の住所を入力し出て来た値を「map.js」の11~14行目に入れ込むだけです。

配布元サイトにはもっと詳しい情報がありますので、そちらを参考にされてください。

※私の方では、Google Maps APIやスクリプトに関する質問等は受付けてませんので、ご了承ください。


GoogleMap関連の過去記事

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

JavaScriptオンオフの設定と確認。

この記事は約 2 分で読めます。 最近「jQuery」が面白くていろいろ試していますが、JacaScriptがオフ環境ではあんまり意味のないモノになっています。 全くWebの知識がない人にとって、Ja …

ファイルアップロード・メール添付機能をWordPressお問い合わせプラグイン「Contact Form 7」でカンタン実現!

この記事は約 1 分で読めます。 WordPressでお問い合わせフォームを付けるときは、いつもプラグイン「Contact Form 7」を利用しています。 日本人の作者で、利用者が多く、更新頻度の高 …

no image

WordPress管理画面の不正アクセス防止に「Simple Login Lockdown」

この記事は約 1 分で読めます。 WordPressの管理画面にログインするには、ユーザー名とパスワードさえ合っていれば誰でもどこでも入る事が出来ます。 特に推測しやすいパスワードにしていた場合、全然 …

no image

DreamweaverCS4にHTML5+CSS3のコードヒント・ドキュメントタイプを!

この記事は約 1 分で読めます。 コーディングの時に主に「Dreamweaver」を使用しています。バージョンは、CS4とCS5。 HTML5をぼちぼち・・・なところで、CS5は最初から「HTML5」 …

no image

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

この記事は約 1 分で読めます。 GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。 画面の横幅 …