LOGIN ID Password Auto Login Register Now! Lost Password?
XUGJ Forum

pico で Google Map を手軽に使うためのプラグイン

  • このフォーラムに新しいトピックを立てることはできません
  • このフォーラムではゲスト投稿が禁止されています

投稿ツリー


前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2009/5/3 20:18
jidaikobo  Moderator of Forum 居住地: 2005年6月から  投稿数: 661
うちの会社のコーディング担当者がゴニョゴニョと書きましたので、代理投稿させてもらいます

* * *

http://www.jidaikobo.com/xoops/pico_plugins/function.pico_gmap.php.zip
ファイルは html/class/smarty/plugins に入れてください。

pico の表示側(main_viewcontent.html)では携帯電話用と通常コンテンツで使う場合、あと編集側(main_content_form.html)において、extra_fields で入力をするための場合に使うことができます。

基本的な書き方は以下のような感じです。
<{pico_gmap name=hoge key=fuga width=500 height=300 lat=$content.ef.gmap_lat lng=$content.ef.gmap_lng}>

うまく導入できると、編集画面が下記のようになります。
http://www.jidaikobo.com/xoops/images/google_map.png

以下オプション・・・(使えるもの)

引用:
use・・・(pc,ktai,form)
通常はpc表示用です。以下の値を入れると、吐き出されるものが変わります。
use=ktaiで携帯用staticmap、
use=formでフォーム入力欄が出てきます。
key or api・・・(pc,ktai,form)
googlemap apiキーを入れます。ページのヘッダ等で別途記述している場合はこの値は必要ありませんが、
当然ページ内にapikeyがないと表示されません。
name or mapname・・・(pc,ktai,form)
表示領域のidです。複数使う場合は切り分けてください。デフォルトはmapです。
width・・・(pc,ktai,form)
googlemapの表示領域です。指定しない場合はnormalとformは500 ktaiは200となります。
height・・・(pc,ktai,form)
googlemapの表示領域です。指定しない場合はnormalとformは300 ktaiは200となります。
lat・・・(pc,ktai,form)
位置情報です。
lng・・・(pc,ktai,form)
位置情報です。lat,lngを指定しない場合、または値がない場合は「京都駅」が中心となります。
clat・・・(pc,ktai,form)
地図の中心地。マーカーと地図の中心を別の場所にしたいときに設定します。
指定しない場合は上記latの値となります。
clng・・・(pc,ktai,form)
地図の中心地。マーカーと地図の中心を別の場所にしたいときに設定します。
指定しない場合は上記latの値となります。
zoom・・・(pc,ktai,form)
googleマップのズーム率です。通常は14となっています。
marker・・・(pc,ktai,form)
マーカーを表示する際に指定します。デフォルトはonですが非表示にしたい場合はoffにしてください。
info・・・(pc)
マーカーをクリックしたときに出るインフォウインドウ。''でくくってhtmlで一行で書いてください。(通常モードオンリー)
gcon・・・(pc,form)
ズーム率のコントローラーです。デフォルトはsmallコントローラーです。large または off が選択可能
gtype・・・(pc,form)
マップのタイプです。デフォルトはノーマルマップ。satellite(写真)・hybrid(ハイブリッド)・offが選択可能
wzoom・・・(pc,form)
ホイールズームを有効にするか否かです。デフォルトはoffです。onで有効になります。
drag・・・(pc,form)
マップのドラッグの昨日を有効にするか否かです。デフォルトはonです。地図固定でドラッグでの移動をさせない場合はoffにしてください。
overview・・・(pc,form)
オーバービューマップを右下に表示します。デフォルトはoffです。

■ソースコード
<?php

function smarty_function_pico_gmap( $params , &$smarty )
{
	$use = @$params['use'] ; //default=PC form ktai(staticmap)
	$key = @$params['key'] . @$params['api'] ;
	$name = @$params['name'].@$params['mapname'];
	$width = @$params['width']; //default=500 kta-default=200
	$height = @$params['height']; //default=300 kta-default=200
	$clat = @$params['clat'];
	$clng = @$params['clng'];
	$lat = @$params['lat'];
	$lng = @$params['lng'];
	$zoom = @$params['zoom']; // default=14
	$wzoom = @$params['wzoom']; // on default=off wheelaction
	$overview = @$params['overview']; //default=off on
	$marker = @$params['marker']; //off default=on  
	$info = @$params['info']; //htmlbase oneline default=off  
	$gcon = @$params['gcon']; // large or off default=small
	$gtype = @$params['gtype']; // satellite or hybrid or off default=normal
	$drag = @$params['drag']; // off  default=on

	if($lat==''){$lat='34.985460217132776';}
	if($lng==''){$lng='135.75818538665771';}

	if(! $key){
		$api='';
	}else{
		$api='<script  src="http://maps.google.com/maps?file=api&amp;v=2&amp;key='.$key.'" type="text/javascript"></script>';
	}
	if(! $width){
		if($use=='ktai'){
			$width='200';
		}else{
			$width='500';
		}
	}
	if(! $height){
		if($use=='ktai'){
			$height='200';
		}else{
			$height='300';
		}
	}
	if(! $width){	$width='500';}
	if(! $height){	$height='300';}
	if(! $zoom){	$zoom='14';}
	if(! $name){	$name='map';}

	//gmapcontroll
	if($gcon=='large'){
		$gcon='map.addControl(new GLargeMapControl());';
	}elseif($gcon=='off'){
		$gcon='';
	}else{
		$gcon='map.addControl(new GSmallMapControl());';
	}

	//gmaptype
	if($gtype=='off'){
		$gtype='';
	}else if($gtype=='satellite'){
		$gtype='map.addControl(new GMapTypeControl());';
		$maptype=', G_SATELLITE_MAP';
	}else if($gtype=='hybrid'){
		$gtype='map.addControl(new GMapTypeControl());';
		$maptype=', G_HYBRID_MAP';
	}else{
		$gtype='map.addControl(new GMapTypeControl());';	
	}

	//wheelzoom
	if($wzoom=='on'){
		$wzooms='map.enableScrollWheelZoom();';
	}else{
		$wzooms='';
	}

	//overview
	if($overview=='on'){
		$overview='map.addControl(new GOverviewMapControl(),new GControlPosition(G_ANCHOR_BOTTOM_RIGHT));';
	}else{
		$overview='';
	}

	//marker
	if($marker=='off'){
		$mark='';
		$mark2='';
	}else{
		$mark='var marker = new GMarker(mp);';
		$mark2='map.addOverlay(marker);';
	}

	//dragging
	if($drag=='off'){
		$dragging='map.disableDragging();';
	}else{
		$dragging='';
	}

	//center
	if(! $clat){$clat=$lat;}
	if(! $clng){$clng=$lng;}
	if($info){
		$infowindow='GEvent.addListener(marker,"click",function(){marker.openInfoWindowHtml("'.$info.'");});';
	}else{
		$infowindow='';
	}

	//make gmapcode
	$code=$api.'
<div id="'.$name.'" style="width:'.$width.'px;height:'.$height.'px"></div>
<script type="text/javascript">
//<![[CDATA 
if (GBrowserIsCompatible()) {
'.$makeicon.'
'.$makeicon2.'
var map = new GMap2(document.getElementById("'.$name.'"),{size:new GSize('.$width.','.$height.')});
'.$dragging.'
'.$gcon.'
'.$gtype.'
'.$wzooms.'
var point = new GLatLng('.$clat.','.$clng.');
map.setCenter(point, '.$zoom.' '.$maptype.');
var mp = new GLatLng('.$lat.','.$lng.');
'.$mark.'
'.$mark2.'
'.$infowindow.'
'.$overview.'
}
//]]>
</script>';

$ktai= '<img src="http://maps.google.com/staticmap?center='.$clat.','.$clng.'&zoom='.$zoom.'&size='.$width.'x'.$height.'&maptype=mobile&markers='.$lat.','.$lat.',greeny&key='.$key.'" />';

$form=$api.'
	<table class="outer pico_form_table">
		<!-- gmap_lat -->
		<tr>
			<th class="head" colspan="2">地図検索</th>
		</tr>
		<tr>
			<td class="even" colspan="2">
<div id="'.$name.'" style="width:'.$width.'px;height:'.$height.'px"></div>
<script type="text/javascript">
//<![[CDATA 
if (GBrowserIsCompatible()) {
      var gmarkers = [];
      var gicons = [];
'.$makeicon.'
'.$makeicon2.'
var map = new GMap2(document.getElementById("'.$name.'"),{size:new GSize('.$width.','.$height.')});
geocoder = new GClientGeocoder();
'.$dragging.'
'.$gcon.'
'.$gtype.'
'.$wzooms.'
var point = new GLatLng('.$clat.','.$clng.');
map.setCenter(point, '.$zoom.' '.$maptype.');
var mp = new GLatLng('.$lat.','.$lng.');
'.$mark.'
'.$mark2.'
'.$overview.'
	var lat = '.$lat.';
	var lng = '.$lng.';
var icon = new GIcon(G_DEFAULT_ICON);
var markeropts = new Object();
var marker = new GMarker(point,{ draggable: true });
GEvent.addListener(marker,"dragend", function() {
		var p = marker.getLatLng();
		document.getElementById("gmap_lat").value = p.lat();
		document.getElementById("gmap_lng").value = p.lng();
	});
		map.addOverlay(marker);
	GEvent.addListener(marker,"click", function() {
		map.removeOverlay(marker);
		document.getElementById("gmap_lat").value = "";
		document.getElementById("gmap_lng").value = "";
		document.getElementById("addresspost").value = "";
	});

function showAddress(address) {
if (geocoder) {
	geocoder.getLatLng(
		address,
		function(points) {
		if (!points) {
			alert(address + "が見つかりませんでした");
		} else {
			map.setCenter(points, 12);
			document.getElementById("gmap_lat").value = points.lat();
			document.getElementById("gmap_lng").value = points.lng();
			var marker = new GMarker(points,{ draggable: true });
		GEvent.addListener(marker,"dragend", function() {
			var p = marker.getLatLng();
			document.getElementById("gmap_lat").value = p.lat();
			document.getElementById("gmap_lng").value = p.lng();
		});
			map.addOverlay(marker);
		GEvent.addListener(marker,"click", function() {
			map.removeOverlay(marker);
			document.getElementById("gmap_lat").value = "";
			document.getElementById("gmap_lng").value = "";
			document.getElementById("addresspost").value = "";
		});

		}
		});
	}
}

GEvent.addListener(map, "dblclick", function(overlay, point) {
	if (point) {
		var lat = point.y;
		var lng = point.x;
    var pointx = new GLatLng(lat, lng);
		document.getElementById("gmap_lat").value = point.y;
		document.getElementById("gmap_lng").value = point.x;		
		map.setCenter(point, '.$zoom.');
		var mk = new GMarker(point,{ draggable: true });
		GEvent.addListener(mk,"dragend", function() {
			var p = mk.getLatLng();
			document.getElementById("gmap_lat").value = p.lat();
			document.getElementById("gmap_lng").value = p.lng();
		});
		map.addOverlay(mk);
		GEvent.addListener(mk,"click", function() {
			map.removeOverlay(mk);
			document.getElementById("gmap_lat").value = "";
			document.getElementById("gmap_lng").value = "";
		});
	}
});

}
//]]>
</script>
<input type="text" size="35" name="address" id="addresspost" value="" />
<input type="button" value="住所・名称から座標を取得" onclick=showAddress(document.getElementById("addresspost").value) />
			</td>
		</tr>

		<!-- gmap_lat -->
		<tr>
			<th class="head">座標</th>
			<td class="even"><label for="gmap_lat" style="white-space:nowrap;">lat</label>:<input type="text" name="ef_gmap_lat" id="gmap_lat" size="15" maxlength="255" value="'.$lat.'" />|<label for="gmap_lng" style="white-space:nowrap;">lng</label>:<input type="text" name="ef_gmap_lng" id="gmap_lng" size="15" maxlength="255" value="'.$lng.'" />
			</td>
		</tr>

	</table>';

	if($use=='ktai'){
		return $ktai;
	}else if($use=='form'){
		return $form;
	}else{
		return $code;
	}
}

//extra_fieldsのgmap_latとgmap_lngに値がポストされます。

?>
投票数:2 平均点:10.00
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2009/12/2 10:37
bibisei  3rd Class   投稿数: 1
IE6でgooglemapが表示できませんでしたが、

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

$api='<script src="http://maps.google.com/maps?file=api&v=2&key='.$key.'" type="text/javascript" charset="utf-8"></script>';

とし、他の
<script type="text/javascript">

<script type="text/javascript" charset="utf-8">

とすると解決しました。

加えて
<{pico_gmap name=hogeのhoge部分をmap以外の文字にした方がいいみたいです。例えばmapsとか。
投票数:2 平均点:5.00
  条件検索へ

Back to Page Top
MainMenu
Manuals
Search
XOOPS Official & Dev.
XOOPS Communities