ダリの雑記：WEBプログラム版

| ブログトップ | API関連 | JavaScript関連 | PHP関連 |

GoogleマップAPI v3で地図とマーカー・バルーンを表示（個別版） version1.4b

この記事は1年以上前の記事のため、内容が古い可能性があります。

2012.06.30　バージョンアップしました。（version1.4b4）

2011.11.11　バージョンアップしました。（version1.4b3）

2011.08.13　バージョンアップしました。（version1.4b2）

複数版同様、個別版でも、住所から取得した座標はサーバーにキャッシュ（CSV形式）として残す仕様となりました。

スクリプトをダウンロードする

サンプルを見る

 

注意点

今回のバージョンではPHPも使用しております。もしPHP5.2以上が利用できないサーバをご利用の場合は、申し訳ございませんが、このバージョンは使用しないでください。

またサーバのPHPの設定（php.ini）で「allow_url_fopen」が有効になっていないと利用できませんので、こちらもご注意ください。

なお、PHPを使用するといっても、AJAXリクエストで実行させているだけなので、実際にマップを表示するページをPHP化させる必要はありません。

※作った直後でまだ十分な実験を行えていないので、このバージョンを使用する際は、よく動作をご確認の上、ご利用ください。

※現在ではv3でもAPIキーが必要となっています。
https://developers.google.com/maps?hl=ja

 

手順

「スクリプトの設定」と「map.js」へのパスが変わる（map.jsがgoogle_map_api_jsフォルダの中に入るため）以外は、前バージョンと同じです。

 

１．bodyタグに、バルーン用情報と地図出力用のタグを記述します。（以下例）

<div id="gmap_data">
<div class="gmap_title"><a name="gmap_title">井出商店</a></div>
<div class="gmap_photo"><img src="img/ide.jpg" width="120" alt="井出商店" /></div>
<div class="gmap_info">
住所：<span class="gmap_address">和歌山県和歌山市  田中町4-84</span><br />
TEL：073-424-1689<br />
営業時間：11:30～23:30<br />
定休日：木曜（年始休）
</div>
<div class="clear"></div>
<div class="gmap_description">
和歌山ラーメンの名を全国に知らしめたのがこちらの店。
</div>
</div>
<div id="map" style="width:500px;height:500px;"></div>
<div class="clear"></div>

ここで必要なものは

  • id="gmap_data"：このIDを元にバルーンとマーカー用データを取得します。
  • class="gmap_title"＋aタグ：タイトルをクリックしたときに吹き出しを表示します。
  • class="gmap_address"：住所。この住所を元に座標へ変換します。
  • id="map"：ここにマップが表示されます。必ずwidthとheightを指定してください。

となっています。住所から座標を取得する場合は、マーカー座標＝中心座標となり、ズーム値はデフォルトで設定している値（スクリプト設定参照）となります。

もちろんこれまでのバージョン同様、座標データからマーカーを表示することもできます。その場合は前バージョンと同じく「class="gmap_coord"」を含んだタグを追記してください。

<div id="gmap_data">
<div class="gmap_title"><a name="gmap_title">井出商店</a></div>
<div class="gmap_photo"><img src="img/ide.jpg" width="120" alt="井出商店" /></div>
<div class="gmap_info">
住所：和歌山県和歌山市田中町4-84<br />
TEL：073-424-1689<br />
営業時間：11:30～23:30<br />
定休日：木曜（年始休）
</div>
<div class="clear"></div>
<div class="gmap_description">
和歌山ラーメンの名を全国に知らしめたのがこちらの店。
</div>
<div class="gmap_coord">
34.2284871,135.1894984,34.23075140779955,135.19043684005737,16
</div>
</div>

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

<div class="clear"></div>

class="gmap_coord"の中の座標は

マーカー緯度,マーカー経度,中心座標緯度,中心座標経度,ズームレベル

または

マーカー緯度,マーカー経度,ズームレベル

または

マーカー緯度,マーカー経度

となっています。（座標についてはこちらから手動で取得できます）

中心座標を設定しない場合は、マーカーの座標が中心点となります。
ズーム値を設定しない場合は、デフォルトのズーム値が使用されます。（スクリプト設定参照）

 

２．以下のスクリプトをダウンロードしてください。

 

３．スクリプトの設定を行います。

google_map_api_js.zipをダウンロードしましたら、解凍してください。「google_map_api_js」というフォルダができます。

フォルダの中には

  • get_coord.php
  • map_function.php
  • map.js

の３ファイルが入っています。

map.jsをプログラムが編集できるテキストエディタで開き、26行目付近の

var php_path = "js/v1.4b2/google_map_api_js/get_coord.php";

の部分に、「get_coord.php」までのURLパスを記述してください。

例えば、ウェブルートの「js」フォルダに「google_map_api_js」フォルダをまるごとアップロードする場合は

var php_path = "http://ドメイン/js/google_map_api_js/get_coord.php";

となります。

また、16～21行目付近にかけて、座標やズーム値の初期値を設定できます。（個別版の場合、特に指定がない場合はここで設定するズーム値（zoom）になるので、ご注意ください。）

var mc_lat = 34.6862971;    //中心座標の緯度（初期値）
var mc_lng = 135.5196609;    //中心座標の経度（初期値）
var mp_lat = 34.6862971;    //マーカーの緯度（初期値）
var mp_lng = 135.5196609;    //マーカーの経度（初期値）
var zoom = 5;        //ズーム値（初期値）
var zoom_max = 15;    //ズームの最大値（MAX20 MIN1）寄り過ぎを防ぐ

以上の設定が終わりましたら、「google_map_api_js」フォルダをまるごとサーバにアップロードしてください。ただし、上記で設定した 通り、map.jsには「get_coord.php」までのパスが記述されているので、それに沿った場所にアップロードしてください。

また、「google_map_api_js」フォルダには、CSVファイルを書き出す必要があるため、パーミッションを777にするなど、書き込み権限をつけてください。

 

４．htmlファイルのheadタグにjqueryとmap.js、Google Map APIを読み込んでください。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/google_map_api_js/map.js"></script>

※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
※「jquery」とスクリプトファイル一式（「google_map_api_js」フォルダ）は、「js」フォルダにアップロードしたと仮定して記述しています。

 

５．bodyタグのonloadにて、マップ表示用関数を呼び出します。

<body onload="map_single('map','gmap_data')">

map_singleの引数について

  • 第一引数：マップを表示するタグのID（今回はmap）
  • 第二引数：バルーン情報が入っているタグのID（今回はgmap_data）

これで、マーカー・バルーン付きマップが表示できます。（マーカーをクリックするとバルーンが表示されます）

 

６．スタイルを整えます。以下をheadタグに記述するか、別ファイルに保存してheadタグで埋め込んでください。（スタイルシートのダウンロードはこちら）


#map{
float:left;
}

.clear{
clear:both;
}

/*吹き出しのスタイル*/
.gmap_block{
width:320px;
}
.gmap_block .gmap_title{
font-size:100%;
font-weight:bold;
margin-bottom:10px;
}

.gmap_block .gmap_photo{
float:right;
margin-left:10px;
overflow:hidden;
}

.gmap_block .gmap_info{
font-size:75%;
}

.gmap_block .gmap_description{
font-size:75%;
margin-top:10px;
}
/*お店の情報（個別用）*/
#gmap_data{
float:left;
margin-right:10px;
width:320px;
}

#gmap_data .gmap_photo{
float:left;
width:130px;
}

#gmap_data .gmap_title{
font-size:100%;
font-weight:bold;
line-height:1.5em;
}

#gmap_data .gmap_info,
#gmap_data .gmap_description{
font-size:75%;
line-height:1.5em;
}

#gmap_data .gmap_description{
padding-top:5px;
}

.gmap_coord{
display:none;
}

サンプル [新しいウィンドウで開く]

以上です。

バグなどありましたらご連絡いただけるとありがたいです。

日々の生活にhappyをプラスする｜ハピタス

このエントリーをはてなブックマークに追加

LINEで送る

タグ ：

nandani | 2011年05月14日 | コメント(9) | トラックバック(4) | API関連 | JavaScript関連 | PHP関連

関連記事

  1. GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版） version1.4b
  2. GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版） version1.3
  3. GoogleマップAPI v3で地図とマーカー・バルーンを表示（個別版）
  4. GoogleマップAPI v3で地図とマーカー・バルーンを表示（個別版） version1.3
  5. GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版）

Powered by YARPP.

トラックバック

トラックバックURL

トラックバック一覧

1. google_map_api_js.zipをバージョンアップしました[バージョン1.4b2] | ダリの雑記：WEBプログラム版 | 2011年08月13日 5:42 PM

[...] 使い方はこちら：マーカー個別版・マーカー複数板 [...]

2. WordPressのカスタムフィールドでGoogleMAPその２ | ダリの雑記：WEBプログラム版 | 2011年08月24日 4:44 PM

[...] GoogleマップAPIで地図とマーカー・バルーンを表示（個別版） [...]

3. マップ表示用スクリプトをバージョンアップしました[バージョン1.4b3] | ダリの雑記：WEBプログラム版 | 2011年11月11日 8:35 PM

[...] ■使い方はこちら：マーカー個別版・マーカー複数板 [...]

4. マップ表示用スクリプト【Google Map API v3版】を修正しました。[version1.4b4] | ダリの雑記：WEBプログラム版 | 2012年06月30日 5:09 PM

[...] ■使い方を見る：マーカー個別版・マーカー複数板 [...]

コメント一覧

1. Posted by kou   2012年07月02日

貴サイトを利用させて頂いておりますkouと申します。

HTML内の住所から地図を表示したかったので、非常に助かります。
分かりやすい解説で私の様な初心者にも表示は出来ましたが…初期値の var zoom = 5; の数値を変えても初期表示が日本列島になってしまいます。対策がございましたら、ご指導頂けますようお願い致します。

2. Posted by nandani   2012年07月02日

kouさん。
コメントありがとうございます。
var zoom = 5;はズーム値の設定ですので、座標の初期値設定を変更する場合は、16行目付近にある
var mc_lat = 34.6862971; //中心座標の緯度（初期値）
var mc_lng = 135.5196609; //中心座標の経度（初期値）
を変更してください。

座標の取得についてはこちらのページをご利用ください。
https://nandani.sakura.ne.jp/jstest/googlemapapi/map_set.html
上記のフォームに住所を入れると下にマーカー座標が表示されます。

3. Posted by kou   2012年07月03日

早々の返信ありがとうございます。
「初期表示が日本列島」と言うのはかなり広い地域が表示されてしまうと言う意味で、表示地域に付いては住所をきっちり読み込んで表示してくれています^^　ただ、あまりにも広い地域なので大阪も京都も同じような地点がマークされてしまっています。zoomにしようとvar zoom = 5;を変えても反応してくれません。対策がございましたら、ご指導頂けますようお願い致します。

4. Posted by kou   2012年07月03日

数値を書き直しても動作しなかったのはリロードが上手くいってなかったようです…　先程もう一度試すと上手くいきました。大感謝です。今後とも宜しくお願いしますm(__)m

5. Posted by nandani   2012年07月03日

kouさん。

質問の意図を勘違いしてすみません;
無事解決したようでよかったです^^

6. Posted by pjxx   2012年11月12日

はじめまして。pjxxと申します。
こちらのプログラムを更新の度に利用させていただいております。

とても単純な質問なのですが、
ズームの寄り過ぎを防ぐzoom_maxがver1.3.1より追加されていますが、
指定しても反映されないようです。
前後の初期ズーム値等は問題なく指定できるのですが、
何か原因があるのでしょうか？
未リロード等のミスではないようです。

お忙しいかとは思いますが、是非ともコメントをよろしくお願いいたします。

7. Posted by pjxx   2012年11月18日

上記のzoom_maxが反映されない件についてですが、
Google Chromeでのみ表示されないようです。
私の能力では根本の解決には時間がかかりそうですが、
報告させていただきました。
これからも宜しくお願い致します。

8. Posted by nandani   2012年12月13日

pjxxさん。
コメントありがとうございます。
返事が遅くなり大変申し訳ございません。
もう見てないかもしれませんが、念のため回答させていただきます。
version1.4b4をテストしたところ、Chrome正常に動作しているようです。
もしかして「map_single」関数をご利用でないでしょうか？
こっちの関数はマーカー１つ用で、特に指定がない限り「zoom」の設定を優先します。（zoom_maxは使用しません。）
「map_all」関数の場合は、たとえばマーカーが１つしかない場合などは「zoom_max」が優先されます。
未リロードではないとすると、上記の理由か、もしかしたらChromeのバージョンの違いかもしれません。
現在でも同様の問題は起きますでしょうか。

9. Posted by heypola   2015年04月08日

このプログラムを大変便利に利用させて頂いております。ありがとうございます。
質問ですが、この個別版で、最初からバルーンが表示された状態にすることは可能でしょうか？
可能であればその方法を教えていただければと思います。
よろしくお願いします。

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL

月別アーカイブ

カテゴリー

新着記事

コメント

タグクラウド

cakePHP EC-CUBE News LikeBox さくらインターネット GoogleMapAPI viewport MT htaccess suExec Facebook 寺・神社 セキュリティ PIE Canvas SSL GoogleMap MT便利プラグイン PHP IE8 IE9 CSS3 Fedora Movable Type OGP Joruri Bing Ruby on Rails HTML5 プラグイン Google+1 Twitter Firefox 歴史探訪 ゾーン API Wordpressメモ apache Linux WordPress Flash LDAP target-densitydpi Google カゴヤ

週間アクセスランキング

  1. viewportの設定に注意 | ダリの雑記：WEBプログラム版 （248アクセス）
  2. Javascriptでプルダウンの選択を変更する（getElementsByTagName） | ダリの雑記：WEBプログラム版 （234アクセス）
  3. PHPを用いてFacebookにログインしているユーザの基本情報を取得する方法【Facebook】 | ダリの雑記：WEBプログラム版 （183アクセス）
  4. GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版） version1.4b | ダリの雑記：WEBプログラム版 （172アクセス）
  5. hal.dll.の破損？【WindowsXPが立ち上がらない】 | ダリの雑記：WEBプログラム版 （164アクセス）
  6. wordpressでカテゴリー一覧を表示する方法２ | ダリの雑記：WEBプログラム版 （158アクセス）
  7. Windows7で突然ネットがつながらなくなった時の対処法メモ | ダリの雑記：WEBプログラム版 （154アクセス）
  8. 「input」タグの「submit」ボタンを画像にかえる方法 | ダリの雑記：WEBプログラム版 （131アクセス）
  9. カスタム投稿（カスタムポスト）ごとにカテゴリーを設定する【Wordpress】 | ダリの雑記：WEBプログラム版 （111アクセス）
  10. IEでもCSS3 その１（ie-css3） | ダリの雑記：WEBプログラム版 （94アクセス）

プロフィール

和歌山でウェブプログラマーをやってます。使える言語はHTML・PHP・Javascriptなど。
Perlも扱えるようになるといいなぁ、と思う今日この頃。

ついでに書くと、漫画・アニメが大好きなオタクです。

最近はアクアリウムにはまり中。

趣味・日常版ブログへ

Twitterへ

フィード

RDF/RSS 1.0 | RSS2.0 | Atom

Copyright(c) 2010 - 2024 ダリの雑記