Cakephpでgoogle mapを利用する

Cakephpでgooglemapを活用する一つの方法として以下のjqueryプラグインを利用することができます。

http://labs.d-s-b.jp/plugins/jQuery/jQueryGoogleMaps/

使い方

latとlngの取得

地図を表示するために緯度経度(latとlng)を取得します。Cakephpのコントローラでプライベート関数を定義してみます。

function _getLatLng($address){
	$api = 'http://maps.googleapis.com/maps/api/geocode/xml?address='
              . urlencode($address)
              . '&sensor=false';

	$xml = simplexml_load_file($api_uri);

	$code = $xml->status;
	if( $code == 'OK' )
        {
    	$lat = $xml->result->geometry->location->lat;
    	$lng = $xml->result->geometry->location->lng;
    	$coordinates = $lat. ',' . $lng;
  	}

        else
        {
    	$coordinates = false;
  	}
  	return $coordinates;
}

googlemapのapiに$address(住所)を引数としてリクエストを行い、レスポンスとしてlatとlngを取得している例です。

lat, lngデータの格納

上で定義した_getLatLngをコントローラ内で呼び出す例です。以下の例は、フォームからユーザーに入力してもらった住所を引数として上で定義したプライベート関数に渡しています。最後にsaveでデータベースに緯度経度を保存しています。

if( $this->data['Model']['address'] )
{
	$address = $this->data['Model']['address'];
	
	if( $coordinates = $this->_getLatLng($address) )
	{
		list($lat, $lng) = explode(',', $coordinates);
		$this->data['Model']['lat'] = $lat;
		$this->data['Model']['lng'] = $lng;
	}
	
	else
	{
		$this->Model->invalidate('address', '住所を入力してください。');
	}

        $result = $this->Model->save($this->data);
}

緯度経度情報を利用して地図を表示

緯度経度をデータベースに保存しましたので、任意の場所に表示させることができます。表示させたいページのviewでjqueryの本体やライブラリを読み込み処理を書きます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/js/jquery.GoogleMaps.js"></script>

地図の読出し部分コードは公式ドキュメントを参考に以下のようにしました。

	<script type="text/javascript">
		jQuery('#gmap').GoogleMaps({
			lat: <?php echo $lat; ?>,
			lng: <?php echo $lng; ?>,
			zoom: 15
		});
	</script>

latとlngを変数で記述することにより、緯度経度を動的にとるようにしています。動的にデータを取得するためにコントローラ側でviewに対して緯度経度情報をsetしてあげる必要があります。

#gmap{
	width: 100%;
	height: 280px;
}

cssを設定し見た目を調整することができます。