【 JavaScript 】 Google API　を利用して、Google Map を表示、実装する - HTML5, jQuery役立つ情報ブログ

JavaScriptを利用して、Google APIでGoogle Mapをサイトに実装する方法を紹介します。

非常に簡単ですが、準備する情報として、表示したい場所の緯度経度が必要です。
取得方法は様々ありますが、そのうちのひとつをご紹介します。

では実際どのようなコードになるか下記に記します。

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head> 
<meta charset="UTF-8">
<title>GoogleMap</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="map" style="width: 450px; height: 450px;"></div> 

<script src="http://maps.google.com/maps?file=api&v=2.78&key=ABQIAAAAY3QhpAivo_9PrarKLGIpURS9lFaAjcEgZ-Tj2TWZiSgqOU4cVxQm-Xt_Pvw7dVQq72clu65U5BfDdg"></script> 

<script> 
var map = null;
var geocoder = null;
var pointabs = new GLatLng(35.710024,139.810911);
var text = '〒131-0045<br>東京都墨田区押上１丁目１ 東京スカイツリー<br>リニューアルオープン！！<br>展望台無料ツアー開催中！！';
var marker = new GMarker(pointabs);
 
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.enableContinuousZoom();
 
map.enableScrollWheelZoom();
function wheelevent(e) {
if (!e) e = window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
GEvent.addDomListener(map.getContainer(), "DOMMouseScroll", wheelevent);
map.getContainer().onmousewheel = wheelevent;
 
map.setCenter(pointabs, 17);
map.addOverlay(marker);
marker.openInfoWindowHtml(text);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
});
}
}
load();
</script>

</div>
</body>
</html>

【style.css】

@charset "UTF-8";

body,td,th {
color: #333;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #FFF;
margin: 0;
}
#container {
  width: 520px;
  margin: 20px auto;
}
#map {
  box-shadow: 0 2px 6px #CCCCCC;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
font-weight: normal;
}

var pointabs = new GLatLng(35.710024,139.810911);

の数字の部分に表示したい緯度経度を入れます。

あとは、住所が入っている部分を自分なりに変えて実装して下さい。

また、

map.setCenter(pointabs, 17);

の数字部分は拡大率になっています。
経験上18前後が見やすくていいと思います。