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

XAMPP(Bitnami)で簡単にWordPressローカル環境を構築してみた。(for Windows)

この記事は約 1 分で読めます。 以前、「WordPressテスト環境をXAMPPで作ってみた♪ for Windows」でWindowsにXAMMPでローカル環境を作ってWordPressを入れてみ …

no image

WordPressのオベンキョウ①

WordPressで、自分のサイトを作る事にしました。

no image

WordPress.comの便利機能が入ってる 「Jetpack」を試してみた♪

この記事は約 1 分で読めます。 アクセス解析プラグイン「WordPress.com Stats」をずっと使っていました。 他にもアクセス解析の勉強のために使用しているものがあるのですが、一番よく見て …

no image

WordPress 簡単にスライダーを投稿内に追加出来るプラグイン「SlideDeck」

この記事は約 1 分で読めます。 WordPressには、とても素敵なスライダープラグインがあります。まだ試せていないものもたくさんあるので、少しずつ試していく予定です。 今回は、投稿する記事の中にス …

no image

WordPressのバージョンを消す方法。

この記事は約 2 分で読めます。 WordPressのバージョンによってはセキュリティー的に脆弱性があるようで、いろいろネット検索をしていると表示を消した方が良いと出て来たので消してみたいと思います。 …