パソコンTips - 正和情報サービス

Google Mapの使い方について

　弊社サイトで掲載している地図は「Google Map Api」を使用しています。Googleのアカウントさえあれば誰でも利用できます。

（１）Googleアカウントから、キーを取得する。

（２）ヘッダ部で、以下のようにGoogle APIのスクリプトを取得する。
　　（(key)のところに取得したキー値を入れる。）
<script src="http://maps.google.co.jp/maps?
hl=ja&file=api&v=2&key=(key)"
type="text/javascript">

（３）ボディ部に地図を表示するエリアを作成する。
　　（id、サイズは任意）

<div id="map" style="width: 500px; height: 400px"></div>

（４）ボディのonloadとonunloadイベントを指定する。
　　（onloadのメソッド名は任意）

<body onload="initialize()" onunload="GUnload()">

（５）onloadイベントを記述する。

initialize() {
// ブラウザが対応しているかチェックしてから動作する。
if (GBrowserIsCompatible()) {
// 表示したい緯度経度（任意）を指定する。
var point = new GLatLng(34.230876, 135.166528);
// マップオブジェクトを取得する。（引数は表示エリア名）
var map = new GMap2(document.getElementById("map"));
// 左側に表示する地図の拡大・縮小ツール
map.addControl(new GLargeMapControl());
// 上部右側に表示する地図・航空写真・地形の切り換えボタン
map.addControl(new GMapTypeControl());
// 左下に表示する縮尺表示
map.addControl(new GScaleControl());
// 右下に表示する概括地図
map.addControl(new GOverviewMapControl());
// 以下は地点表示の吹き出し
var objDiv = document.createElement("div");
var objP1 = document.createElement("p");
var objP2 = document.createElement("p");
objP1.appendChild(document.createTextNode("見出し1"));
objP2.appendChild(document.createTextNode("見出し2"));
objDiv.appendChild(objP1);
objDiv.appendChild(objP2);
objDiv.style.height = "40px";
objDiv.style.backgroundImage = "url(logo.gif)";
objDiv.style.backgroundRepeat = "no-repeat";
objDiv.style.color = "#996633";
objP1.style.fontWeight = "bold";
objP2.style.fontStyle = "italic";
// 地図の表示位置を指定する。
map.setCenter(point, 13);
// 地点表示の吹き出しを表示する。
map.openInfoWindowHtml(point, objDiv);
// 縮尺変更時に再度吹き出しを表示するよう、イベントを登録する。
GEvent.addListener(map, 'zoomend',
function(oldZoomLevel, newZoomLevel)
{map.openInfoWindowHtml(point, objDiv);}, false);
}
}

閉じる

Yahoo Mapの使い方について

Yahoo　Mapは以下のようにして使用できます。

（１）Yahooアカウントから、キーを取得する。

（２）ヘッダ部で、以下のようにYahoo APIのスクリプトを取得する。
　　（(key)のところに取得したキー値を入れる。）
<script type="text/javascript"
       src="http://map.yahooapis.jp/MapsService/js/V2/?appid=(key)">
</script>

（３）ボディ部に地図を表示するエリアを作成する。
　　（id、サイズは任意）

<div id="map" style="width: 500px; height: 400px"></div>

（４）ボディにonloadイベントを指定する。
　　（メソッド名は任意）

<body onload="initialize()">

（５）onloadイベントを記述する。

    <script type="text/javascript">
//<![CDATA[
    function initialize() {
     // 表示する場所の緯度経度を設定する
      var point = new YLLPoint(34.22759356,135.16930554);
      // 地図オブジェクトを生成（引数は表示エリアのidと表示位置）
      var map = new YahooMapsCtrl("map", point);
      // 縮尺変更ツールバーを表示
      map.setVisibleSliderbar(true);
      // センターマークを非表示に
      map.setVisibleCentermark(false);
      // マウスのホイールに反応しないようにする
      map.setEnableWheelOperation(false);
      // 表示位置にアイコンを設定（"icon1"は任意、"L1"はL1～5、S1～5を設定）
      map.addIcon("icon1", point,"吹き出しテキスト","L1","ラベルテキスト")
    }
//]]>
    </script>

閉じる

郵便番号から住所を取得するには？

■弊社の「お問い合わせ」ページでは、郵便番号を入力すると、相当する住所を自動で取得・表示するようになっています。

■取得先は「郵便番号検索API」から、XMLデータを弊社サーバーで受信しています。

■データを取得するサーバー側のスクリプトはごく簡単なもので、以下のとおりです。

<?php
mb_http_output('utf-8');
header('Content-type: text/plain; charset=utf-8');
$zip = $_GET['zip'];
$url = 'http://zip.cgis.biz/xml/zip.php?zn='.$zip;
$xml = simplexml_load_file($url) or die('');
$state= '';
$city= '';
$address= '';
if($xml->ADDRESS_value)
{
    foreach($xml->ADDRESS_value[0]->value as $item)
    {
      $state .= $item[state];
      $city .= $item[city];
      $address .= $item[address];
    }
    $address = ereg_replace(
      '以下に掲載がない場合', '', $address);
    $address = ereg_replace('（.+$', '', $address);
    echo $state.$city.$address;
}
else
{
    echo '';
}
?>

■問い合わせのページの方には、JavaScriptでロード時にイベントを追加しています。（zip、adrsにはそれぞれ郵便番号と住所の入力コントロールが入っています。）

zip.observe('blur', function(){
var code = zip.value.replace('-','');
if(code.match(/^[0-9]{7}$/))
{
    var url = "（phpファイルのURL）' + '?zip=' + code;
    new Ajax.Request(url, {
      method:'GET',
      onSuccess:function(httpObj)
      {
        adrs.value = httpObj.responseText;
      }
    });
}
});

■このJavaScriptは、NetCommonsが標準で使用している、「prototype.js」ライブラリを使用しています。詳しくは「prototype.js の開発者向けメモ」をごらん下さい。

閉じる

NetCommonsにテンプレートを追加するには。

■NetCommonsは「ページ」に「モジュール」を追加することでサイトを構築していきます。モジュールの表示は「テンプレート」と呼ばれ、あらかじめいくつかのテンプレートが設定されています。

■サイト構築の都合で、テンプレートを新たに作成するときは、以下の手順によります。

（１）warp/nc_trust_path/webapp/modules フォルダにモジュールのフォルダがあります。以下は目的のモジュールフォルダの中で作業します。

（２）tamplateフォルダ下に設定されたテンプレートのフォルダがあります。そこに任意の名前の新規フォルダを作成します。この名前が新しいテンプレートの名前になります。

（３）同様にfiles/cssフォルダにも、同じ名前の新規フォルダを作成します。

（４）元になるテンプレートのフォルダから、すべてのファイルを新しいフォルダにコピーします。

（５）hrmlとcssのファイルを更新して、表示を変更します。（htmlの変更にはsmartyの知識が必要です。）

（６）サイトにログインし、「管理」画面から、「モジュールの更新」を実行します。

■以上で、設置したモジュールに、新しいテンプレートを適用できるようになります。

■NetCommonsでは、これらのファイルの内容は一度データベースに格納され、コンテンツと同時に動的に呼び出されます。したがって、ファイルを更新しただけではダメで、必ず「モジュールの更新」を行います。

当サイトでは、メニューと問い合わせのモジュールに、オリジナルのテンプレートを適用しています。

【メニュー】常に全メニューを表示するように変更しています。

【問い合わせ】入力コントロールにIMEの制御を追加しています。郵便番号から住所を取得するようにしています。

閉じる

Contents Menu

カウンタ