ACFで住所入力からgoogle map表示、リンク取得、カラーカスタマイズ、アイコンカスタマイズ

  • 2
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

ACFで住所入力からgoogle map表示、リンク取得、カラーカスタマイズ、アイコンカスタマイズ

Advanced Custom Fieldsで、googleマップ表示から、住所だけでmapで開くリンク取得までやっちゃう
ACF Googlemap

インストール

WordpressでACFインストール
カスタム投稿タイプならCustom Post Type UIは必須
カスタムフィールド Googlemap追加

アイコンをカスタマイズ、地図の色を変える
ACF Googlemapより取得したソースに下記を追加

両方とも
function add_marker( $marker, map )
の中に入れる。

アイコンカスタマイズ

jQuery

var icon = new google.maps.MarkerImage('アイコン画像パス',
new google.maps.Size(160,50),//アイコン画像サイズ
new google.maps.Point(0,0),
new google.maps.Point(80,25)//アイコン画像表示位置

下記に代入

jQuery

// create marker
var marker = new google.maps.Marker({
  position  : latlng,
  map     : map,
  icon    : icon//アイコン
});

地図の色を変える(下記だと色がモノクロになる)

jQuery

 var styleOptions = [{
 'stylers': [{
 'gamma': 1.2//ガンマ
 }, {
 'saturation': -100//彩度
 }, {
 'lightness': -20//明度
 }]
 }]

 var styledMapOptions = {
 name: 'mono'
 }
 var monoType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
 map.mapTypes.set('mono', monoType);
 map.setMapTypeId('mono');

読み込み

テンプレートファイルに下記を記載

google map

Wordpress

<div class="acf-map">
  <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>

リンク

<?php echo $location['address']; ?>
で住所だけ取得可能なのでaタグに入れる。

Wordpress

<a href="http://maps.google.com/maps?q=<?php echo $location['address']; ?>"></a>

住所の入力のみでいけるので本当に便利