The Location Plugin

• jamesg371

• July 10, 2013 at 1:22 pm

I have installed the Location Plugin and I see that it adds a Google map that IO can drag to my Address and it displays it in the post editor page, So what I have been trying to figure i=out is how to make the Google map display on my page? Anyone have any ideas? Here is what I was using to try to display the map on the page. Please let me know if this is wrong, as it wont even display the text or the map,lol.

<?php
 
$location = get_field('google_map');
if($values)
{

	foreach($values as $value)
	{
		echo $location['address'];
		echo $location['coordinates'];
	}
 
}
 
?>

• Jonathan Kim

• July 10, 2013 at 1:59 pm

Hi. I not use that plugin. My way to include maps is by using pure google api code…

Put in some place of your php file the script file:

<script>
function initialize(){
var place = new google.maps.LatLng(<?php the_field('coordinates');?>);
var mapOptions = {zoom:2,center:place,streetViewControl:false,mapTypeControl:false,mapTypeId:google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
var marker = new google.maps.Marker({position:place,map:map,title:"<?php the_field('mapdesc');?>"});
}
function loadScript(){var script = document.createElement('script');script.type = 'text/javascript';script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';document.body.appendChild(script);}
window.onload = loadScript;
</script>

Explain:

■ var place = new google.maps.LatLng(<?php the_field('coordinates');?>);
Here the script will determinate where to place the map, so the LatLang as the name means read the Latitude and Longitude that you put there and create a place where later the map will be centered there.

So I create a text field with name coordinates with the coords of my desired place.

■ new google.maps.Marker({position:place,map:map,title:"<?php the_field('mapdesc');?>"});
More customization. Text field with place description (“mapdesc”). Optional.

■ document.getElementById('map')
Here the script is searching throught all the dom looking for an element with id “map”. So in some place of your code, put an div element with id map like this:
<div id="map"></div>

■ Remember to style de map element. Give a certain height and width by css if necessary.

This always works for me and here you have the Google Maps Javascript API v3, for more tricks and customization: https://developers.google.com/maps/documentation/javascript/

Hope I help!

• kurdt_the_goat

• July 10, 2013 at 1:59 pm

You can just get any map embed code from Google, then find where the coordinates are in that code, and replace them with the coordinates from your location field.

• Jonathan Kim

• July 10, 2013 at 2:16 pm

Also, right click over a map point: click option “What’s here?”

In the search input will appear the coordinates…

• devinwalker

• July 12, 2013 at 12:55 pm

This code worked a bit better for me than Giu Tae Kim’s

<div id="contact-map-canvas"></div>

    <script>
        function initialize() {
          var myLatlng = new google.maps.LatLng(<?php the_field('locations');?>);
          var mapOptions = {
            zoom: 4,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          var map = new google.maps.Map(document.getElementById('contact-map-canvas'), mapOptions);

          var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'Hello World!'
          });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>

• jamesg371

• July 13, 2013 at 8:23 am

DevinWalker, was this actually pulling from the plugin field itself? I will give it a shot and see what hap[pens, thanks for your input.

Gui Tea Kim, I actually want the maps to come from the plugin, it seems that Devins code may do that for me. The reason is that I am building this site for someone else and I want everything to be as easy as possible for him. Thanks for your input as well 🙂