Googleマップを統合する

Googleマップは、マッピングのための優れたツールであり、オープンAPIのおかげでサイトに統合できるようになりました。 固定位置だけでなく、任意の位置も統合します。つまり、データベースに「場所」というテーブルを作成し、そこにタイトル、x、yフィールドを入力します。



次に、各場所を編集する必要があります。 マップが表示されるキャンバスを作成します。

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







次に-Googleからのライブラリ呼び出しを固定します。 私はsmartyを使用しているため、開発者キーを変数として渡します。

<script src="http://maps.google.com/maps?file=api&v=2&key={$google_maps_hash}" type="text/javascript"></script>









次に、すべてのダーティな作業を行う関数を作成します。div要素にマップを作成し、指定された座標に従って配置し、バブルを設定します。 これらの座標を編集する場合、関数はフィードバックにより、特定のフォーム「registration_form」の非表示の入力フィールドに、転送されたピンポインターの新しい座標を指定します。

<script type="text/javascript">

function load_map(x,y,title) {



if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(x, y), 13);

map.enableScrollWheelZoom();



point = new GLatLng(x, y);

marker = new GMarker(point);



map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.addOverlay(marker);

marker.openInfoWindowHtml(title);

/*

var mgr = new GMarkerManager(map);



GEvent.addListener(marker, "dragend", function() {

//var center = map.getCenter();

var strCenter=marker.getPoint();

marker.openInfoWindowHtml(document.forms['registration_form'].title.value);

document.forms['registration_form'].geo_x.value=strCenter.lat();//arrCenter[0];

document.forms['registration_form'].geo_y.value=strCenter.lng();//arrCenter[1];



});

*/

}

}

</script>