実現する機能
沖縄を訪れる観光客用に、探している商品やお店の種類や店名を入れると場所を教えてくれる地図ソフトをGoogleの「Advertising Using AdSense for Maps」（地図用配信広告）というAPIで作成したのですが、GoogleMapがV3にアップしたので作り変えました。今回は、GeoLocationとLocal SearchのふたつのAPIを合体させて使い勝手を改善しました。
以下、構築手順の備忘録です。
事前準備
Google MAPS APIキーの取得が済んでいること
SAMPLE(GeoLocation + Local Search)
SAMPLEのHTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Google Maps API V3 ジオロケーション＆ローカルサーチ</title>
<meta name="keywords" content="Google Maps API V3,現在地,店舗検索,ぐるナビ" />
<meta name="description" content="Google Maps API V3 版 ぐるナビ店舗検索" />
<!--スマホでのサイズ変更を許可しない-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--GPSの使用を許可-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!--Googleが提供するjavascript APIの読み込み-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!--地域検索javascriptの読み込み-->
<script type="text/javascript" src="http://ufuso.jp/js/googlemaps/jGoogleBarV3.js"></script>
<!--現在位置確認javascriptの読み込み-->
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
<script type="text/javascript">
//<![CDATA[
var zoom = 15; //表示時の地図のズームレベルを指定
var mapTypeId = google.maps.MapTypeId.ROADMAP //Googleマップのデフォルト 2Dタイルを指定
var initialLocation;
var okinawa = new google.maps.LatLng(26.2285276688135, 127.6891565322876); //那覇市の緯度、軽度
var browserSupportFlag = new Boolean();
var map;
var infowindow = new google.maps.InfoWindow();
var geowindow = new google.maps.InfoWindow();
google.load('search','1'); //searchモジュールのロードと利用コントローラーの指定
function initialize()
{
var myOptions =
{
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeControl: true,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions:
{
position: google.maps.ControlPosition.LEFT_BOTTOM
},
zoom: zoom,
mapTypeId: mapTypeId
};
gbarOptions={
// defaults
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var gbar=new window.jeremy.jGoogleBar(map,gbarOptions)
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(gbar.container);
//現在位置の座標収得
if(navigator.geolocation) //navigator.geolocationでの取得
{
browserSupportFlag = true;
navigator.geolocation.watchPosition(function(position)
{
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
},
function()
{
handleNoGeolocation(browserSupportFlag);
});
}
else if (google.gears) //ダメならgoogle.gearsでの取得
{
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.watchPosition(function(position)
{
initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
map.setCenter(initialLocation);
},
function()
{
handleNoGeolocation(browserSupportFlag);
});
}
else
{
browserSupportFlag = false; // それでもダメなら諦める
handleNoGeolocation(browserSupportFlag);
}
}
function handleNoGeolocation(errorFlag) // それでもダメなら諦めるの後処理
{
if (errorFlag == true)
{
initialLocation = okinawa;
contentString = "現在地を確認できません。那覇市役所（仮庁舎）を表示します。";
}
else
{
initialLocation = okinawa;
contentString = "現在地を確認できません。那覇市役所（仮庁舎）を表示します。";
}
map.setCenter(initialLocation);
geowindow .setContent(contentString);
geowindow .setPosition(initialLocation);
geowindow .open(map);
}
window.onload=initialize;
//]]>
</script>
</head>
<body >
<!--「map_canvas」という名前の地図をここに表示させる。style 属性でサイズ指定を忘れずに-->
<div id="map_canvas" style="width:580px; height:400px"></div>
</body>
</html>
|
コメントを残す