CODEWITHSUNDEEP
javascriptwordpressgoogle-mapsgoogle-maps-api-3
drcreative
drcreative

Reputation: 37

google my maps ~ custom map embed into wordpress

This is my initial question at stackoverflow. I am developing a wordpress site for a Bed and Breakfast client. On her current site she has a map with legend on the left hand side. I looked into how this was implemented and saw that she was using a site called mapchannels.com

I am creating this custom map with google my maps. I've created an API key and am using that for the map. When I go through the mapchannels protocol, the markers in the legend at left don't look like the markers in the google my maps work space. In addition, when I plug in the iframe code to embed the map, I get an error in the map area that says "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details."

I just want to add a map to this site that not only loads, but has markers that look the same as those in my google maps workspace.

Here is a link to the page that I'm working on https://jpalenhouseblog.com/index.php/map-and-plan-your-stay/ Here is a link to the current website with map embedded via mapchannels.com
I've added links to the following javascripts into the header.php file for my wordpress theme ( Redwood ) and the map still doesn't load.

<script src=“https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=MY_API_KEY" async="" defer="defer" type="text/javascript"></script>

<script src=“https://maps.googleapis.com/maps/api/js?key=MY_API_KEY" async="" defer="defer" type="text/javascript"></script>

link to comparison between map embedded on dev site and map in my google maps workspace

Any advice on either of these two related questions would be appreciated.

Upvotes: 0

Views: 785

Answers (1)

evan
evan

Reputation: 5699

You're getting the following JS errors in the dev console:

Google Maps JavaScript API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: https://www.mapchannels.com/mc6/27915/27915-jph.htm?v=20200217122746

Google Maps JavaScript API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: https://jpalenhouseblog.com/index.php/map-and-plan-your-stay/

To fix this I recommend that you first unrestrict your API key; if the map loads with an unrestricted key then you can be certain that the problem is restrictions-related.

Now, to restrict your API key properly, try adding these domain referrers (with wildcards "*" included, assuming that you own both these domains):

*.mapchannels.com/*
*.jpalenhouseblog.com/*
mapchannels.com/*
jpalenhouseblog.com/*

Hope this helps!

Upvotes: 1

Related Questions