プライベートや仕事で気づいたことやノウハウなどを書き留めるブログです

2011/04/11

GoogleMap API バージョン3の簡単サンプル

0 件のコメント
GoogleMapAPIのバージョン3を使ってみました。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/tutorial.html

htmlに埋め込む形式で使ってみた。
情報ウィンドウがちょっと面倒かもしれないが、コーディング次第でもっと簡単になりそう。
バージョン3だと、登録キーが不要なので、この点は良いかもしれない。


1)map.htmlにて、MapAPIを呼び出す。
2)次に、埋め込み表示したいhtmlの中で、map.htmlをiframeで呼び出す。
3)表示はcssで定義する。

//html内の呼び出し
<iframe frameborder="0" height="440" scrolling="NO" src="http://hoge.co.jp/map.html" width="356"></iframe>


//定義ファイル map.html

//
//マーカーを2個設置。
//マーカーをクリックすると情報ウィンドウを表示する。


<!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>仙台市</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(38.26,140.85);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

/* 1個目 */
var latlng1 = new google.maps.LatLng(38.26,140.85); //latlng と同じ
var marker1 = new google.maps.Marker({
position: latlng1,
map: map,
title:"仙台1"
});
var infowindow1 = new google.maps.InfoWindow({
content: "仙台1"
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});

/* 2個目 */
var latlng2 = new google.maps.LatLng(38.27,140.86);
var marker2 = new google.maps.Marker({
position: latlng2,
map: map,
title:"仙台2"
});
var infowindow2 = new google.maps.InfoWindow({
content: "仙台2"
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});


}
</script>
</head>


<body onload="initialize()" style="margin:0px; padding:0px;">
<div id="map_canvas" style="width:350px; height:440px; margin:0px; padding:0px;"></div>
</body>
</html>

0 件のコメント :

コメントを投稿