SHOJI's Code
 仕事や趣味で書いた各種言語のプログラミングコード(エクセルVBA,PHP,C/C++/C#,JavaScript等)、その他雑記。
2017.08<<123456789101112131415161718192021222324252627282930>>2017.10
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

管理しているホームページに店舗の紹介ページがあり、そこにビットマップで描いた地図がおいてある。今まではそこをクリックすると某地図サイトにリンクするようにしていたのだが、それをGoogle Maps APIを使って表示してみようと思いついた。
<!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>
<title>(タイトル)</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=(API Key)"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
function load()
{
if( GBrowserIsCompatible() )
{
var map = new GMap2(document.getElementById("map"));
var pos = new GLatLng((緯度), (経度));
map.addControl(new GLargeMapControl());
map.setCenter(pos);

var icon = new GIcon();
icon.image = "marker.png";
icon.iconSize = new GSize(80,40);
icon.iconAnchor = new GPoint(0,0);

var markeropts = new Object();
markeropts.icon = icon;

var marker = new GMarker(pos, markeropts);
map.addOverlay(marker);
}

window.onresize = resize;
}

function resize()
{
var map_obj = document.getElementById("map");
var dispsize = getDispSize();

map_obj.style.width = dispsize.width+"px";
map_obj.style.height = dispsize.height+"px";
}

function getDispSize()
{
if( document.all )
{
if(window.opera)
return {width:document.body.clientWidth,
height:document.body.clientHeight};
else
return {width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight};
}
else if( document.layers || document.getElementById )
{
return {width:window.innerWidth,
height:window.innerHeight};
}
}
//]]>
</script>
<style type="text/css">
html
{
margin: 0;
border: 0;
padding: 0;
}

body
{
margin: 0;
border: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 560px; height: 480px;"></div>
</body>
</html>


クリックして表示されるポップアップの内容をそのまま載せた。(API Key)の部分はサイト毎に異なるので割愛。ついでにポップアップされたウィンドウがサイズ変更されたら追従して地図のサイズも変更するようにもしてみた。

テーマ:ホームページ - ジャンル:コンピュータ
コメント
この記事へのコメント
コメントを投稿する

管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2004-2006 SHOJI, Powered By FC2ブログ all rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。