地図を表示させることが出来たら、こんどはマーカー(アイコン)を表示させてみましょう。
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&v=2&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作成方法一覧(次は、地図のアイコンを変更する)
関連記事一覧
スポンサードリンク
Leave a Comment