- 2025/01/18
- Category :
[PR]
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
IT系全般に及び知識メモ、全般と言っても興味があるもののみ
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
1.ライセンスの取得
以下のURLよりAPIキーを取得する
http://code.google.com/intl/ja/apis/maps/
※利用サイトURLと動作URLが異なると正しく
動作しないので注意
※APIキーは、<script src></script>タグで囲われた
部分になるので控えていたほうが良い
2.画面の設定
GoogleMapを表示させたいページに以下のコントロールを
設置しプロパティを設定する
①ScriptManager
Scriptsにメンバを追加し、PathにAPIキーを設定する
②Panel
Height,Widthに任意の値を設定
※設定しないとGoogleMapが表示されない
3.スクリプトの設定
以下のソースを貼り付け
[緯度・経度で指定する場合]
─────────────────────────────────
var map = null;
// ページ・ロード時に呼び出されるイベント・ハンドラ
function pageLoad() {
// 使用しているブラウザがGoogleマップに対応しているかを判定
if (GBrowserIsCompatible) {
// 「id=gmap」で定義された領域に地図を表示
//(ナビゲーションや表示位置、種類を定義)
map = new GMap2($get('pnlMap'));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var point = new GLatLng(" + latitude + ", " + longitude +
var marker = new GMarker(point);
map.setCenter(point, 17);
map.setMapType(G_NORMAL_MAP);
map.addOverlay(marker);
var builder = new Sys.StringBuilder();
builder.append('<a href=""' + result.Url + '"">');
builder.append(result.Place + '</a><br />');
builder.append('" + hotelname + "');
// マーカをクリックした場合に、バルーンを表示
GEvent.addListener(
marker,
'click',
function(){
marker.openInfoWindowHtml(builder.toString());
}
);
}
}
─────────────────────────────────
[住所で指定する場合]
--------------------------------------------------------------------------------
var map = null;
// ページ・ロード時に呼び出されるイベント・ハンドラ
function pageLoad() {
// 使用しているブラウザがGoogleマップに対応しているかを判定
if (GBrowserIsCompatible) {
// 「id=gmap」で定義された領域に地図を表示
//(ナビゲーションや表示位置、種類を定義)
map = new GMap2($get('pnlMap'));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var geocoder = new GClientGeocoder();
geocoder.getLatLng(
'"+ address +"',
function(point) {
if(!point){
alert('住所情報が正しくありません。');
}else{
var marker = new GMarker(point);
map.setCenter(point, 17);
map.setMapType(G_NORMAL_MAP);
map.addOverlay(marker);
var builder = new Sys.StringBuilder();
builder.append('" + hotelname + "');
// マーカをクリックした場合に、バルーンを表示
GEvent.addListener(
marker,
'click',
function(){
marker.openInfoWindowHtml(builder.toString());
}
);
}
}
);
}
}
--------------------------------------------------------------------------------