http://code.google.com/intl/ja/apis/maps/documentation/javascript/tutorial.html
htmlに埋め込む形式で使ってみた。
情報ウィンドウがちょっと面倒かもしれないが、コーディング次第でもっと簡単になりそう。
バージョン３だと、登録キーが不要なので、この点は良いかもしれない。
１）map.htmlにて、MapAPIを呼び出す。
２）次に、埋め込み表示したいhtmlの中で、map.htmlをiframeで呼び出す。
３）表示は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);
/* １個目 */
var latlng1 = new google.maps.LatLng(38.26,140.85); //latlng と同じ
var marker1 = new google.maps.Marker({
position: latlng1,
map: map,
title:"仙台１"
});
var infowindow1 = new google.maps.InfoWindow({
content: "仙台１"
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
/* ２個目 */
var latlng2 = new google.maps.LatLng(38.27,140.86);
var marker2 = new google.maps.Marker({
position: latlng2,
map: map,
title:"仙台２"
});
var infowindow2 = new google.maps.InfoWindow({
content: "仙台２"
});
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 件のコメント:
コメントを投稿