Geo Mashup や、Lightweight Google Maps の一覧地図をトップに表示
5件の返信を表示中 - 1 - 5件目 (全5件中)
-
地図ページを固定ページとしてフロントページに使うか、Javascriptなどをそっくりそのままテーマのindex.php(やhome.php)に貼り付ける方法があります。
前者の場合は、別途地図ページを作成した後、[表示設定]にて特定のページをフロントページに指定します。後者については、home.phpを使うのでなければ、is_home()などを使ってトップのみに表示させます。
作業はやや煩雑ですが、最終的な出力にJavascriptなどがすべて適切に配置されるようにすればどんな場所にも配置可能です。どちらも、地図を配置したい場所にマークを追加するのをお忘れなく。
Geo Mashupなら
<!–GeoMashup–>Lightweght Google Mpasなら
<div id="google_maps"></div>
のようなマークです。集約された地図
地図が複数ある、という意味ならプラグインを使わずに
footer.php に以下を追加して<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=あなたのGoogle MAPS APIキー" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ jQuery(document).ready( function($) { if (GBrowserIsCompatible()) { function createMap(lat, lng){ var point = new GLatLng(lat , lng); $gmaps = $('#gmaps'); if($gmaps.length > 0){ var map = new GMap2($gmaps.append('<div class="gmap"></div>').children(':last').get(0)); map.setCenter(point, 16); map.setMapType(G_NORMAL_MAP); var marker = new GMarker(point); map.addOverlay(marker); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); } } } $(window).unload(function(){ GUnload(); }); if(createMap){ // ポイントを好きなだけ追加 createMap(35.681118, 139.767036); //東京駅 createMap(35.362913, 138.731232); // 富士山 } }); //]]> </script>index.php に
<div id="gmaps"></div>
と書けばその中に地図が追加されます。CSS例)
.gmap{ width:200px; height:200px; float:left; margin:10px; } #gmaps{ width:100%; height:auto; overflow:hidden; }.jsファイル化,マークアップ変更,CSS はお好みで。
GoogleMaps API は V3 がリリースされていますので、プラグインを使わないのであればV3にトライしてみるというのも、今後の役に立つかもしれません。
V3版。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script> <script type="text/javascript"> //<![CDATA[ jQuery(document).ready( function($) { function createMap(lat, lng, myTitle){ $gmaps = $('#gmaps'); if($gmaps.length > 0){ var myLatlng = new google.maps.LatLng(lat, lng); var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var myMap = new google.maps.Map($gmaps.append('<div class="gmap"></div>').children(':last').get(0), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: myMap, title: myTitle }); } } createMap(35.681118, 139.767036, '東京駅です'); createMap(35.362913, 138.731232, '富士山です'); }); //]]> </script>APIキー不要&シンプル。
5件の返信を表示中 - 1 - 5件目 (全5件中)
トピック「Geo Mashup や、Lightweight Google Maps の一覧地図をトップに表示」には新たに返信することはできません。