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

ちょっと複雑なtableがコピペで簡単にできる「Table Tag Generator」

この記事は約 1 分で読めます。 滅多に複雑なtableタグを書くことがないのですが、久々にtableタグを使うことになって・・・すっかり忘れていました。。。 tableデザインの時代のコーディングで …

no image

Webフォント「Google Web Fonts」を使ってみた

この記事は約 1 分で読めます。 だんだんと古いブラウザに対応しなくてよくなってくると、以前は画像だけで対応していたものがcss3などを利用できるようになってきます。 Webフォントもcss3の技術。 …

モバイル フレンドリー テストで合格しているのに、「スマホ対応」ラベルが付かない時

この記事は約 1 分で読めます。 スマホで検索していると「スマホ対応」と表示されるようになって、しばらく経ちました。 検索している時の順位も、「スマホ対応」と表示されてないページより、表示されているペ …

no image

WordPressテンプレートタグをメモ【コンテンツ編】

この記事は約 1 分で読めます。WordPressにはたくさんのテンプレートタグがあります。 似たようなものや、同じ結果なのに記述の仕方が何通りもあったりするので、後で「何だっけ?」って思う事もしばし …

no image

WordPress Moreタグを使った抜粋にチャレンジ

この記事は約 1 分で読めます。 今回は、「抜粋」にチャレンジします♪ 「抜粋」は、記事の一部のみ表示して「続きを読む」という文字をクリックすると、全文が表示されるものです。 長い文章の場合にはかなり …