法則55 ブログ記事にGoogleマップで地図を表示する
地図を表示する（X）HTMLソース【1】
<div id="map" class="map"></div>
地図の大きさを指定するCSSソース【2】
/* 地図が正しく表示されたときのスタイル*/
.map {
width: 500px;
height: 300px;
}
/* 地図が正しく表示されなかったときのスタイル*/
.mapError {
color: #FF0000;
background: none !important;
}
Google Mapを呼び出すテンプレートソース（head要素内）【3】
<MTIfNonEmpty tag="EntryKeywords">
<script src="http://maps.google.co.jp/maps?file=api&v=2.x&key=（ここにAPI キーを入れる）" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var geocoder;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
geocoder = new GClientGeocoder();
}
}
function moveAddress(){
geocoder.getLatLng("<$MTEntryKeywords$>", showMap);
}
function showMap(latlng){
if (latlng){
map.setCenter(latlng, 15);
var marker = new GMarker(latlng);
map.addOverlay(marker);
}else{
document.getElementById("map").className="mapError";
document.getElementById("map").innerHTML="<p> 地図が正しく表示されていません。<a href=\"https://example.com/contact/\"> お問い合わせフォーム</a> からご連絡ください。</p>";
}
}
//]]>
</script>
</MTIfNonEmpty>
キーワードの住所を地図に表示するテンプレートソース（bodyの属性値）【4】
<body <MTIfNonEmpty tag="EntryKeywords"> onload="load();moveAddress();" onunload="GUnload();"</MTIfNonEmpty>>
リンク
Google Maps API
