In this post I am going to show you how to implement the Google Maps API with WordPress’ custom fields containing GPS coordinates. I like to use the Advanced Custom Fields plugin to manage the WordPress fields and in this example will have several custom fields for the longitude and latitude coordinates.
The first thing you need to do is get the Google Maps API key here: https://developers.google.com/maps/documentation/javascript/get-api-key#key It is free so there is no reason not to use it.
Once you get your Google Maps API key copy it and place it in the snippet below where it says YOURKEyHERE.
If you are working on a localhost (your compuater, site is not live) you can use the code below however you will need to get an API key once your site goes live.
So, now you have copied and pasted one of the above two snippets into your page, preferably in the header. Next, comes the integration of WordPress custom fields into Google Maps API.
Integrating WordPress Custom Fields from a Custom Post Type into Google Maps API
Now you need to set the container for the map to show up in. The Google Maps API will find the container based on the id you give it and in this case the container’s id is “map”. You can change the width dimensions to pixels or whatever you want.
After the container div, and preferably in or near the footer of your page you will add the following code that brings it all together.
You will need to modify the above code to fit your needs. First off, let's change the name of the custom post type you are using. You can find this on line 6 where it says "YOURCPT". Adjust your custom post types query arguments as needed.
Next, proceed to line 9. The first section is what will be show in your marker and here we have the post title and permalink to it. When you click the marker it will open up and display this bit of code.
Moving on to line 10... This is where we bring in the GPS coordinates attached to your post using custom fields. For this example, we are using a custom field call "lat" for the lattitude and "long" for the longitude. If you are using two fields for the GPS be sure to separate them with a comma.
Line 16 - this is where you can set the zoom level of your map. The higher the number the further in you will zoom.
Line 17 - you will see some GPS cooridnates here.... this where you will center your map and can change those numbers to fit your GPS location.
That is pretty much it. You should now have a map that pulls in the coordinates from your custom post types custom fields.