<link rel="stylesheet" href="css/map_style.css" type="text/css" media="screen" />
～
<body id="home" onload="initialize();">
～
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/map.js" charset="utf-8"></script>
<div id="map001"></div>
～
【js/map.js】
function initialize() {
var initPos = new google.maps.LatLng(35.681503, 139.688380);
var myOptions = {
noClear: true,
center: initPos,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map001'), myOptions);
var content = '<div id="infoWindow">' +
'<h1>infoタイトル</h1>' +
'<p>コメント<br><br>' +
'<a href="http://www.cxdnext.co.jp" target="_blank"> リンク先webサイト<span></span>はこちら</a></p>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: content
});
var image = 'img/shimomoto.jpg';
var Marker = new google.maps.Marker({
position: initPos,
map: map,
// icon: image,
title: 'タイトル'
});
google.maps.event.addListener(Marker, 'click', function() {
infowindow.open(map, Marker);
});
var kmlUrl = "http://グローバルIP/demo/data/kmlIcon.kml";
var kmlLayer = new google.maps.KmlLayer(kmlUrl,
{
suppressInfoWindows: false,
map: map,
preserveViewport: true
});
{
suppressInfoWindows: false,
map: map,
preserveViewport: true
});
kmlLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
【css/map_style.css】
@charset "utf8";
#map001 {
width: 100%;
height: 500px;
font-family: arial,sans-serif;
border-top: outset 6px #b2b2b2;
border-bottom: outset 6px #b2b2b2;
border-left: outset 6px #b2b2b2;
border-right: outset 6px #b2b2b2;
}
#infoWindow {
width: 250px;
}
#infoWindow h1 {
margin: 0 0 10px;
font-size: 16px;
}
#infoWindow p {
margin: 0;
font-size: 12px;
line-height: 160%;
}
#infoWindow p span {
font-size: 80%;
}
#infoWindow a {
padding-right: 12px;
border-bottom: 1px #593869 dotted;
color: #593869;
background: url(../img/external.gif) right center no-repeat;
text-decoration: none;
}
#infoWindow a:hover {
border: 0;
color: #862682;
background: url(../img/external_o.gif) right center no-repeat;
}
※kmlファイルはインターネット上にないと表示されない。（ローカルはダメ）
0 件のコメント:
コメントを投稿