NucleusでGoogle Maps API V3

Nucleusには「NP_GoogleMaps」というGoogle Maps APIを簡単に利用できるプラグインがありますが、対応しているAPIがV1なため、最新のV3では使用できません。V3はGoogleアカウントが無くても使えるので、NP_GoogleMapsでV3を利用できるよう改造に挑戦してみたのですが、僕には敷居が高過ぎあきらめました。が、改造するまでもなく、おなじみの「NP_znItemFieldEX」を利用する事でAPI V3を利用する事ができるようになりました。

まずはNP_znItemFieldEXで住所*1用の拡張フィールドを作成します。あとはNucleusのスキンとテンプレートを駆使してGoogle Mapsに表示させるデータを作成するだけ。

Google Mapsの表示をさせるJavascriptですが、詳しい情報は適切なサイトが山ほどありますので検索してください。僕が構築した某サイトでは以下のようなテンプレートを作成しています。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript">
window.onload = initialize;
function initialize() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': '【表示させる住所】'}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var latLng = results[0].geometry.location;
        var lat = latLng.lat();
        var lng = latLng.lng();
        var myOptions = {
            zoom: 18,
            center: new google.maps.LatLng(lat, lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDoubleClickZoom: true,
        }
        var map = new google.maps.Map(document.getElementById("Google Mapsを表示させるDIVタグのID"), myOptions);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
        });
        var info = '【吹き出しに表示させる内容】';
        openInfo(marker, info);
        push(marker);
    }
});
}

function openInfo(marker, info) {
google.maps.event.addListener(marker, 'click', function() {
    var contents = new google.maps.InfoWindow({
        content: info,
    })
    contents.open(marker.getMap(), marker);
});
}
</script>

「【】」で囲っている2カ所が記事固有の情報になります。「【表示させる住所】」はNP_znItemFieldEXの情報です。「【吹き出しに表示させる内容】」は標準の「<%title%>」「<%body%>」もあれば、NP_znItemFieldEXの拡張フィールドもあります。

これをそのまま個別アイテムページで使用するテンプレートに入力すると見通しが悪すぎるので、拡張フィールド「address」に値がある時だけ呼び出すようにしています。こんな感じですね。

<%znItemFieldEX(address,,item/map,true)%>

これは「address」に値がある場合、「item/map」テンプレートを用いて表示させ、その時にNucleusのテンプレート変数も展開する、という命令です。なので「address」に値が無い場合は何も表示されません。

たったこれだけです。後はMapを表示させたい場所に

<div id="任意のID"></div>

とするだけ。Google Maps API V3、相当猛烈使いやすいです。ここでは触れていませんが、JSON形式のデータを扱えるので、スペシャルスキンでJSONデータを作成し、「メインの目次ページ」でイベントマップを表示させたりしています。また、「MarkerClusterer v3 Example」のように、密集したマーカーをまとめて表示できるライブラリもあって楽しいです。

ということで、Google Maps API V3を利用して、ライブ会場をマッピングしている「Sweet Hollywaiians」のサイトのご紹介と、ライブのお知らせです。

なにやら賑やかで楽しそうなイベントが、8月29日（日）に開催される様です。大阪近郊にお住まいの方は夏の思い出作りにスウィング・ダンスを経験されてはいかがでしょうか。

Mechakucha Swing presents Hawaiian Swing Night

1. *1 - 緯度と経度、2つの入力欄でも可能です。

Keyword: NP_znItemFieldEX / Nucleus Tips / Google

Search

Keyword » 182