Welcome !! Now 2008.05.18 02:22 (JST)

Google マップを表示しよう

[ スニペット ]

GoogleMapMakar によるGoogleマップの表示サンプルです。

GoogleMapMakar の解説はこちらになります。

ブログに組み込んだ例はこちらです。

GoogleMapMakar で地図を表示

Loading map...

サンプル地図

コードサンプル

スニペットコール

[!GoogleMapMarker? &apiKey=`ABQ...` &startID=`368` &sortBy=`menuindex` &sortDir=`DESC` &tpl=`Ggmaptpl2` &mapDiv=`map2` amp;linksDiv=`maplinks2` &mapTypeControl=`small` &centerPos=`36.743561,139.621811` &defaultZoom=`12` &showOverviewMap=`1` &overviewMapSize=`100,100` &hideOverviewMapByDefault=`0`!]

テンプレート「Ggmaptpl2」

<div class="g-maparea">
<div id="map2">Loading map...</div>
<div id="maplinks2"></div>
</div>

追加CSS

div.g-maparea {
margin-botttom:1em;
margin-left:36px;
color:#333;
}
div.g-maparea #map2 {
width: 400px;
height: 400px;
float:left;
border:3px double #CC0;
}
div.g-maparea #map2 h4 {
color:#333;
}
div.g-maparea #maplinks2 {
margin-left:420px;
}

△ページトップ