No official Google Maps location? No problem!

Do you want to show Google Maps pins on custom places that aren’t “official” locations on a Google Map?

MJ9PFNOY5ErfMCbgcy1Zv7 KYTMntLDCht40hSHXBZEl8M3dF 0Z8UPxi jyCwvm3Lbn5eKWMFnRvn3dzx3Ho94mfdS2ZX Lt0VB8oiWxG3x5OFVr1 7nLvvX4dwYczSzBW0yPo - How to embed custom Google Maps pins into WordPress using location coordinates

No problem, in this article you’ll learn exactly how to display your location on a Google Map using coordinates!

Why embed a Google Map using coordinates?

Well, maybe you don’t have a business account on Google so your Maps location doesn’t exist yet.

Or maybe you just can’t—or don’t want to—get the Google GMB verification but still need a way to display your location on a Google map.

This step by step guide will show you how!

Note: this guide is a bit technical so if you get lost post a comment and we’ll be around to assist. 🙂 Otherwise, just follow the steps and you’ll be fine.

Requirements

Here’s what you’ll need for this guide:

1 – Google Maps – premier maps solution by Google.

2 – Google API key (paid) – you’ll need to activate a Google API key. It’s paid but it’s cheap.

3 – A page or post – a place to embed your map! (like a WordPress page)

4 – Header and footer plugin – we’ll use this to add our scripts.

Getting you Google API key

1 – To get a Google Maps API key, first, go to the Google API Console and login with your Google account. 

2 – Before you can get an API key, you need to create a project. 

To create a new project, click the dropdown menu on the top side and click NEW PROJECT on the top-right corner of the appearing popup.

gaMzJn6kOCiVYOu6v9bxvisPQAcEIiIZDc12gLBr CpTQAS52CuRF7C98Sbzzd1 567DkT9SPtF3ryOINDiOhP9r21S4Li4On1lifoqyFn ZkclCB 9 gv7 kJyY98YjUS8nT1M - How to embed custom Google Maps pins into WordPress using location coordinates

3 – Once you have a project, select it (via the dropdown menu) and click Library on the left panel.

CiqPmJE94bk99Gnduz08Nt6sIs3aBg0p 0dOB05nvIFEoVLRlVAJ jUBSi5Bdc1OTzWj5D1 8 p7qr8dA2egF9pE9S X5PuMVeRZRFHeResO4T1B3dLH DL i4p3Ldl23pX9UDw - How to embed custom Google Maps pins into WordPress using location coordinates

5 – On the top side, you will see several Google Maps APIs on the Maps section. 

6 – Select the Maps JavaScript API.

KOCv1R0GZjQHzpiizSYP65x3986zxOFgQg1Rt89S7cDgUR2MMLl8UuNkDfcrO6Ad0cORw0ZFNtlcSwwOqR4KVg15tj 2pCgLgHrw eINON6Uaxnudo dkchL97anOc3yI5vq5wU - How to embed custom Google Maps pins into WordPress using location coordinates

7 – Go back to your project main dashboard and click Credentials on the left panel. 

8 – Create a new API key by clicking the Create credentials button and select API key.

jIBTw9vHHyRkUZWAlw maDNuQv0k62eUuAy MrrLaaN79qjuZA84H6vPpTiojvuiwRTWSH24fIYaBuCwRHxMET4jcfEl2bFE0RVFc53g83OnEEVIAbJVzfRjogpxtGiUCmkKBsQ - How to embed custom Google Maps pins into WordPress using location coordinates

A popup will appear afterward, providing you the API key. 

You can now use the API key on your app!

Embed Google Maps API into your page

The Maps Embed API lets you place an interactive map, or Street View panorama on your site with a simple HTTP request. 

You can easily embed it into your web page or blog by setting the Maps Embed API URL as the src attribute of an iframe:

vzO0PpqdCI2oZPbkZN YwpYeUY96HQyHyWhH9D LyOcvsVlLPRQ9deWT70 0WOwOhjZBldUWUt DLqN y lc6ldguCA3bUJVmvqJkb6jIL39pAFLdIFsq7du1JWuDGBMWYAiDNw - How to embed custom Google Maps pins into WordPress using location coordinates

Create HTML to display the map on the page

In WordPress, a simple way to embed a Map is to create a new page template and assign the template to your new page.

Before you create the page template, please create your child theme so your work will not be deleted once the theme has official update.

1 – Once you have created the child theme, go to your child theme folder and create a new folder named page-templates

kfM qIFWgIcmQK2SQ84LkRqz7iJanMpdz01UJSuJST qMCjDzhSDvIPWdY1 kFYrC2gdB6mkUCZ6CyqWthKOXkhLjVOetIiJYZvKctpIM3jvkp5  HbJkCTgKeLpRjNLf49eN c - How to embed custom Google Maps pins into WordPress using location coordinates

2 – Inside that folder create a new file and name it map-listings.php

QHRUqaEo1ivKzKnNwYB7x 8mGQHpZdlU1XmjUsKZCNfsUiE1lL6dday4IOm0trbZ4IiUQDztpCfUJV2ypXLDGmwsJCmtqcLfms9hygXoHljt UgSLDIOBX xbnwzXFvyVKokfcU - How to embed custom Google Maps pins into WordPress using location coordinates

3 – Open the file using your preferred text/code editor and copy / paste the following code into it.

<?php
// Template Name: Map Listings
?>
 
<?php get_header(); ?>
 
<?php get_footer(); ?>

4 – After you create your page template, between the get_header and get_footer you need to add this code where you will assign the map.

<div id="map"></div>

Note: it’s that you add an ID to the element for later use in the script.

Create Javascript function to assign HTML to map

Once you have the HTML element you need to create a Javascript function to “get” the element by its ID

To create this Javascript function, you need to create a Javascript file and connect the file with your child theme.

1 – First create a new folder called assets in your child theme.

2 – Then add a new file inside this folder and name it scripts.js

HBGnH9od0Eqss9MtUITBWF  3FqAHbP39IvnDI3kL9P0Q419xyBjFDYH degTVFJSrW8IgT B4xXwZkYjyBOgrFuJNXikskDlQOquY6B1oIMoGCcdbcitYQ6QjHC6wflvrRELbA - How to embed custom Google Maps pins into WordPress using location coordinates

3 – Open the scripts.js file you’ve just created in your code editor and paste the following code into it.

function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
      center: new google.maps.LatLng(43.207118, -32.118391),
      zoom: 4,
     });
}

4 – Once the map is displaying on the element, you need to create an array where you will add the coordinates and any other parameters that you need to display the listings and pins.

To do so add the following code to the scripts.js file:

var listingsinPOV = [];
for (let i = 0; i < listings.length; i++) {
listingsinPOV.push({'image': listings[i]['image'], 'title': listings[i]['title'], 'excerpt': listings[i]['excerpt'], 'url' : listings[i]['url'], 'package': listings[i]['package']});
}

5 – Next you will need to create another array with the latitude and longitude and make another loop to display the pins on your map, like so:

var listingsinPOV = [];
const features = [];
var marker;
 
for (let i = 0; i < listings.length; i++) {
listingsinPOV.push({'image': listings[i]['image'], 'title': listings[i]['title'], 'excerpt': listings[i]['excerpt'], 'url' : listings[i]['url'], 'package': listings[i]['package']});
features[i] = { 'position': new google.maps.LatLng(listings[i]['lat'], listings[i]['lng']), 'type': 'pin', 'markerInfo': markerContent, 'image': listings[i]['image'], 'title': listings[i]['title'], 'url' : listings[i]['url'] };
}

for (let i = 0; i < features.length; i++) {
      marker = new google.maps.Marker({
      position: features[i].position,
      icon: icons[features[i].type].icon,
      map: map,
});

6 – Make sure that all of the code above is inside initMap function.

So the FULL code for the scripts.js file will look like this:

function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
      center: new google.maps.LatLng(43.207118, -32.118391),
      zoom: 4,
     });
 
var listingsinPOV = [];
for (let i = 0; i < listings.length; i++) {
listingsinPOV.push({'image': listings[i]['image'], 'title': listings[i]['title'], 'excerpt': listings[i]['excerpt'], 'url' : listings[i]['url'], 'package': listings[i]['package']});
}
 
var listingsinPOV = [];
const features = [];
var marker;
 
for (let i = 0; i < listings.length; i++) {
listingsinPOV.push({'image': listings[i]['image'], 'title': listings[i]['title'], 'excerpt': listings[i]['excerpt'], 'url' : listings[i]['url'], 'package': listings[i]['package']});
features[i] = { 'position': new google.maps.LatLng(listings[i]['lat'], listings[i]['lng']), 'type': 'pin', 'markerInfo': markerContent, 'image': listings[i]['image'], 'title': listings[i]['title'], 'url' : listings[i]['url'] };
 
}
 
for (let i = 0; i < features.length; i++) {
      marker = new google.maps.Marker({
      position: features[i].position,
      icon: icons[features[i].type].icon,
      map: map,
});
}

Once you’ve done these steps you’re ready to “call” your Google map from inside of your WordPress post or page.

Displaying your Google Map in a WordPress post or page

1 – Create a new post or page in WordPress

2 – Select the page template called “Map Listings”

image 1024x585 - How to embed custom Google Maps pins into WordPress using location coordinates

3 – Publish your post or page

4 – When you visit the page you’ll see the map embedded like so

image 1 1024x428 - How to embed custom Google Maps pins into WordPress using location coordinates
Share This