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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

no image

無料で高機能なメールフォーム「メールフォームプロCGI」を設置してみた

この記事は約 1 分で読めます。 通常の静的なWebサイトにお問い合せフォームをつける時、自分でCGIを用意しないといけない場合、いろいろ探すのに大変でした。。。 無料でなら尚更・・・で、広告とか入っ …

no image

Creative Cloud デスクトップアプリケーションが「サインアウトしています」と表示し、サインインできないとき

この記事は約 1 分で読めます。 時々、Adobeのソフトは使える状態なのに、Creative Cloudにデスクトップアプリケーションにサインインできないことがあります。 私の場合は、「サインアウト …

no image

WordPress 「contact form 7」と「Akismet」でスパムメール対策をしてみた。

この記事は約 1 分で読めます。 このサイトでは、「お問い合せ」のページに「contact form 7」というプラグインを使用しています。 コメントスパム対策にWordpressにデフォルトで入って …

no image

Facebookページをタイムラインに移行してみた♪

この記事は約 1 分で読めます。 2012年3月1日、Facebookページで大きな変化がありました! いままで「いいね!」を獲得する為に様々な方法がとられていましたが、「タイムライン化」になった事で …