Reply To: The Location Plugin

• 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!