初めての[CakePHP2.x]での開発、そして挫折するまで日記～その29 GoogleMapHelperを使ってみる

スポンサードリンク

CakePHP

CakePHPを使って自分のサイトを作成しているのですが、

地図データをGoogel Mapで使うことにしました。

以前はYahoo Mapを使ってたのですが、

IEで表示されないんですよね～

なのでGoogle Mapに切り替えます。

そして、CakePHPにはGoogle Mapを使うときに便利な

GoogleMapHelperがあります。

その使い方です。

スポンサードリンク

GoogleMapHelperを設定。

GoogleMapHelperはGoogle Maps API V3のみの利用です。

1.GoogleMapHelperをダウンロード

こちらのサイトからHelperをダウンロードします。
CakePHP-GoogleMapHelper

ダウンロードしたファイル(GoogleMapHelper.php)をapp/View/Helperに移動します。

app/View/Helper/GoogleMapHelper.php

上記のようにファイルを設置します。

2.ヘルパーの使用をビューファイルに記述

GoogleMapを使うビューファイルにヘルパーを読み込ませます。

<?php echo $this->Html->script('http://maps.google.com/maps/api/js?sensor=true', false); ?>

APIキーがある場合はAPIキーを埋め込みます。

<?php echo $this->Html->script('http://maps.google.com/maps/api/js?key=【自分のAPIキー】&sensor=true', false); ?>

3.GoogleMapを表示させる

後はGoogleMapを表示させたい場所に

(例)IDがmapのdivタグ内の場合

<div id="map">
  <?php echo $this->GoogleMap->map(); ?>
</div>

※divタグにはあらかじめCSSで幅と高さを指定しないと表示されません。

と書くだけです。

とっても簡単でびっくりしました。

地図表示はオプションで色々指定できます。

<?php
  //マップのオプション指定
  $map_options = array(
    'id' => 'map',            //地図表示させたいID名
    'width' => '800px',　　　　//地図表示させたいIDの幅
    'height' => '800px',      //地図表示させたいIDの高さ
    'style' => '',            //地図表示のCSS
    'zoom' => 7,              //地図表示のズームレベル
    'type' => 'HYBRID',       //地図表示のタイプ
    'custom' => null,         //地図コントローラなどのオプション
    'localize' => true,       //地図表示の時にGPSで現在地を使うかどうか
    'latitude' => 40.69847032728747,   //地図表示の時の緯度(localizeがtrueの場合は現在地が優先されます)
    'longitude' => -1.9514422416687,   //地図表示の時の経度(localizeがtrueの場合は現在地が優先されます)
    'address' => '1 Infinite Loop, Cupertino',   //地図表示の時の住所(localizeがtrueの場合は現在地が優先されます)
    'marker' => true,         //マーカーの使用
    'markerTitle' => 'This is my position',      //マーカーのタイトル
    'markerIcon' => 'http://google-maps-icons.googlecode.com/files/home.png',     //マーカーのアイコン
    'markerShadow' => 'http://google-maps-icons.googlecode.com/files/shadow.png',  //マーカーアイコンの影
    'infoWindow' => true,           //マーカーをクリックしたときのウインドウ表示
    'windowText' => 'My Position'   //マーカーをクリックしたときのウインドウの中身
  );
?>
<div id="map">
<?php echo $this->GoogleMap->map($map_options); ?>
</div>

上記の用にオプションを指定できます。

GoogleMapHelperにあるオプションをオーバーライドして使う形なので

オプションを削除すると、その項目は

GoogleMapHelperにあるオプションが使われます。

なので使わない項目は空白にするといいです。

オプションのwidthとheightは記述しても反映されなかった感じなので

styleともども別でCSSを書いて指定した方がいいかもしれません。

localizeをtrueにしておくと

GPS対応のブラウザなどでは最初の表示で現在地を探します。

(最近のブラウザは、ほぼ対応していると思います。)

trueにしておくとオプションで緯度経度を指定していても

最初の表示は現在地になるので注意してください。

現在地にしたくない場合はfalseにしておけば

指定した緯度経度が最初の表示場所になります。

コントローラの表示場所を指定できるcustomというオプションは

'custom' =>	//コントローラーなどの設定
    'panControl: true,
     zoomControl: true,
     mapTypeControl: true,
     scaleControl: true,
     streetViewControl: true,
     overviewMapControl: true',

という感じで文字列で指定していきます。
(※シングルクオテーションで設定をすべて囲む)

マーカーは地図の中心を表示するものです。

localizeをtrueにした場合は

現在地が地図の中心になります。

マーカーを変えたい場合でGoogleのデフォルトのアイコンを使いたい場合は

こちらのサイトを参照してください。
アイコン一覧表

オプションのマーカー画像のURLを変えるだけです。

また、独自の画像を使いたい場合は

(例)webroot/img/home.png画像を使いたい場合

略
・・・
'markerIcon' => 'home.png',     //マーカーのアイコン
・・・
略

と画像パスをimgフォルダ内で指定します。

その他の詳しい内容はGoogleMapのスタートガイドを見てください。

Google Maps JavaScript API v3（コントロール）

スポンサードリンク

マーカーの表示

マーカーの表示も簡単です。

最初のオプションで指定したものは地図の中心を表示するマーカーです。

それ以外にマーカーを表示する場合もあります。

基本的に下記の書き方で問題ありません。

$this->GoogleMap->addMarker($map_id, $marker_id, $position)

引数には
$map_id　マーカーを表示させたいID
$marker_id マーカーのID、複数設置するときは他のマーカーとかぶらないようにします。
$position マーカーを表示する住所、または緯度経度。緯度経度の場合は連想配列にして設定します。

先ほどのIDがmapの場所にマーカーを表示させるには

<div id="map">
  <?php echo $this->GoogleMap->map($map_options); ?>
  <?php echo  $this->GoogleMap->addMarker('map', 1, array('latitude' => 40.69847, 'longitude' => -73.9514)); ?>
</div>

と書きます。

マーカーを複数表示させたい場合は

<div id="map">
  <?php echo $this->GoogleMap->map($map_options); ?>
  <?php echo  $this->GoogleMap->addMarker('map', 1, array('latitude' => 40.69847, 'longitude' => -73.9514)); ?>
  <?php echo  $this->GoogleMap->addMarker('map', 2, array('latitude' => 41.69847, 'longitude' => -73.9514)); ?>
  <?php echo  $this->GoogleMap->addMarker('map', 3, array('latitude' => 42.69847, 'longitude' => -73.9514)); ?>
</div>

と書けばいいです。

めっちゃ簡単です。

また、マーカーにもオプションを指定できます。

<?php
  // マーカーオプション
  $marker_options = array(
    'showWindow' => true,         //クリックしたときのウィンドウを表示するか
    'windowText' => 'Marker',     //クリックしたときのウィンドウのテキスト
    'markerTitle' => 'Title',     //マーカーのタイトル
    'markerIcon' => 'http://labs.google.com/ridefinder/images/mm_20_purple.png',  //マーカーアイコンの画像
    'markerShadow' => 'http://labs.google.com/ridefinder/images/mm_20_purpleshadow.png',  ////マーカーアイコンの影

  );
?>
<div id="map">
  <?php echo $this->GoogleMap->map($map_options); ?>
  <?php echo  $this->GoogleMap->addMarker('map', 1, array('latitude' => 40.69847, 'longitude' => -73.9514), $maker_options); ?>
</div>

マーカーの画像の変更は最初の方で書いた地図の表示のものと同じ方法です。

他にもポリラインとかの設定もありますが、

詳細はGitのGoogleMapHelperに書いてありますので

そちらを参照してください。(※英語です。)

CakePHP-GoogleMapHelper

スポンサードリンク