Location Fieldで固定ページにGoogle Mapsを表示させるには?
-
Advanced Custom Fields – Location Fieldを使用して、アクセスマップと拠点毎の地図を表示させたいと思っていますが、いまいち使い方がわかりません。
検索しても、表示させるためのコードまで説明されている方を見つけられませんでした。最初は、Documentation(http://www.advancedcustomfields.com/resources/field-types/google-map/)を参考に設置してみました。
いつもなら大体Documentationを参照すれば上手くいのですが、表示できません。
住所を入力しても、海のど真ん中が表示されてしまいます。
$をjQueryに置き換えたりもしましたが結果は同じでした。GitHubからreadme.txt(下記)を参照し試してみましたが、こちらは真っ白な画面が表示されるだけです。
そもそも下記のコードではbxsliderが使われている理由もよくわかりません。Retrieving the value(s) on the front-end differs according to the Map address options.
* Coordinates & address
$location = get_field('location'); echo $location['address']; echo $location['coordinates'];
* Coordinates
the_field('location');
*Google maps V3<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var map; var myLatLang = new google.maps.LatLng( <?php $location = get_field('location'); echo $location['coordinates']; ?>); function initialize() { var mapOptions = { zoom: 8, center: myLatLang, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var marker = new google.maps.Marker({ position: myLatLang, map: map, title:"Hello World!" }); }; google.maps.event.addDomListener(window, 'load', initialize); $('.bxslider').bxSlider({ minSlides: 5, maxSlides: 5, slideWidth: 192, slideMargin: 0, adaptiveHeight: true }); </script> <div id="map-canvas"></div>
それから、下記のコードが簡単だよーという書き込みも見つけ、試しましたらうまく表示できました。
が、これだとLocation Fieldを使用しなくてもいいのでは?というのと、Location Fieldの機能が使えないので意味がないなと思いました。<?php if(get_field('cf_access_map')) { ?> <iframe width="100%" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<?php echo the_field('cf_access_map'); ?>;t=m&z=12&iwloc=A&output=embed&iwloc=near"></iframe> <?php } ?>
便利なプラグインなのでぜひ使用したいのですが…どなたかご教授お願いいたします。
- トピック「Location Fieldで固定ページにGoogle Mapsを表示させるには?」には新たに返信することはできません。