カレンダー

11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

広告



最近の記事

カテゴリー

DATE: CATEGORY:DEV


Google Map APIをさらに使ってみた。



UTF-8で記述しないと日本語は文字化けするので、
その対策としてiframe(中身UTF-8)にて作っております。

だらだら長くなるので、ソースは続きにメモってみた。
めちゃくちゃ簡単ですw

簡単な注釈(コメント)をつけておきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=「ここにキーを入れる」"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
// 地図検索用のクラス呼出
var geocoder = new GClientGeocoder();
// このfunctionでMapの表示
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var defpoint = new GLatLng(38.30718056,138.5595703125);
// 拡大縮小コントロールボタンの利用
map.addControl(new GLargeMapControl());
// 地図表示タイプ変更コントロールの利用
map.addControl(new GMapTypeControl());
map.setCenter(defpoint, 5, G_HYBRID_TYPE);
}
}
// 地図検索用function
function showAddress(address) {
geocoder.getLatLng(address, function(point) {
// 検索文字列が存在しなければalert
if(!point){
alert(address + " not found");
// 存在すれば、そこを基準にmap表示
} else {
map.setCenter(point, 13);
map.openInfoWindowHtml(point,address);
}
});
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
Googleマップサンプル
// 検索用form
<form id="form1" name="form1" method="post" action="">
<input name="address" type="text" id="address" size="35" />
<input type="button" name="submit" value="search"
onclick="showAddress(document.getElementById('address').value)" />
</form>
// マップ表示
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

以上!

>追記。何箇所か抜粋して修正しときます。

1箇所目)
-------------------------
//<![CDATA[
var map;
-------------------------
↓ここはどっちでもいいと思うんですけど、一旦nullを定義した方がよさそう。
-------------------------
//<![CDATA[
var map = null;
-------------------------

2箇所目)
-------------------------
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var defpoint = new GLatLng(38.30718056,138.5595703125);
-------------------------
 ↓mapを一回定義しているので、再定義してるのを直しとこう。
-------------------------
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
var defpoint = new GLatLng(38.30718056,138.5595703125);
-------------------------

こんなところかな。

タグ : DEV GOOGLE MAP WEB

Comment

コメントの投稿

管理者にだけ表示を許可する


トラックバック


この記事にトラックバックする



copyright © なんとなしの日記 all rights reserved.
内職☆在宅ワークの最強は?アフィリエイト!. 初心者だってカッコ良いホームページ作るぅ!
Powered by FC2ブログ
Related Posts Plugin for WordPress, Blogger...