CODEWITHSUNDEEP
dictionaryadvanced-custom-fields
Manesh Timilsina
Manesh Timilsina

Reputation: 719

How can I display Google Map field of Advanced Custom Fields plugin in front-end of my site?

I have used Google Map field of Advanced Custom Fields plugin to input map value from backend of my site. Can anyone suggest me best way to display it in frontend of my site?

Upvotes: 0

Views: 16443

Answers (2)

user46487
user46487

Reputation: 644

I have tried the above accepted answer which didn't worked for me. The easy solution which I have found is to add the location using ACF plugin from the dashboard and display it using an iframe.

     <iframe width="400" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ca/maps?center=<?php the_field('maps'); ?>&q=<?php the_field('maps'); ?>&zoom=14&size=300x300&output=embed&iwloc=near"></iframe><br />

Here maps is the name of the custom google map field which I have created. Replace it with the your desired field name.

Upvotes: 6

Manesh Timilsina
Manesh Timilsina

Reputation: 719

I found solution of using google map field of ACF. You can find documentation of ACF google map field here

If you don't want to use default script of ACF, you can consider following approach:

Add following div where you want to display the map:

<div id="map_canvas" style="height: 350px;width: 1200px; margin: 0.6em;"></div>

Add following codes in footer of your site above wp_footer

<?php $map = get_field('map', get_the_ID()); ?>

<script type="text/javascript"> 

  function initialize() {
        var myLatlng = new google.maps.LatLng(<?php echo $map['lat']; ?>, <?php echo $map['lng']; ?>);
        var myOptions = {
          zoom: 11,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }

      function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
        document.body.appendChild(script);
      }

      window.onload = loadScript;
    </script>

Upvotes: 5

Related Questions