スポンサードリンク

Google Map(地図)にアイコン(マーカー)を表示させる。

地図を表示させることが出来たら、こんどはマーカー(アイコン)を表示させてみましょう。

var markerでアイコンを表示させます(朱書き部)。座標(経度、緯度)は東京タワー、座標収得はコチラ

◆記述

1)Head文

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<meta http-equiv=”Content-Style-Type” content=”text/css” />

<meta http-equiv=”Content-Script-Type” content=”text/javascript” />

<title></title>

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=あなたのキー” type=”text/javascript” charset=”utf-8″></script> ・・・・地図表示

<script src=”http://www.google.com/uds/api?file=uds.js&v=1.0&key=あなたのキー” type=”text/javascript” charset=”utf-8″></script>検索API用

<script src=”http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js” type=”text/javascript”></script>

<link href=”http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css” rel=”stylesheet” type=”text/css” />

<link href=”http://www.google.com/uds/css/gsearch.css” rel=”stylesheet” type=”text/css” />

<link rel=”stylesheet” href=”layout-5-master.css” type=”text/css” />

</head>

2)BODY文

<body onload=”initialize()” onunload=”GUnload()”>

3)HTML

<div id=”map100″>Loading…</div>

4)SCRIPT文

<script type=”text/javascript”>
function initialize() {
if (GBrowserIsCompatible()) {
var map100 = new GMap2(document.getElementById(“map100″));
map100.setCenter(new GLatLng(35.65862, 139.74541), 9, G_NORMAL_MAP);
var marker = new GMarker(new GLatLng(35.65858, 139.74538));
map100.addOverlay(marker);
}
}
</script>

◆サンプル

◆トップへ戻る Google Maps API作成方法一覧(次は、地図のアイコンを変更する)

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">