in my wordpress website i am getting this error for google map
Google Maps API error: MissingKeyMapError
now i have google map api key but i don't know where to insert it, i am not using google map plugin, i am using theme that contain build in google map, what i found now is the reference to google map javascript file that contain this code
var tl_geocoder;var $tl_map;var $tl_marker=false;jQuery(function(a){jQuery(document).ready(function(c){tl_geocoder=new google.maps.Geocoder();c(document).on("click",".layers-check-address",function(f){f.preventDefault();$tl_map=c(this).closest(".layers-map");var g=c(this).closest(".layers-content").find('input[id$="google_maps_location"]').val();var d=c(this).closest(".layers-content").find('input[id$="google_maps_long_lat"]').val();$tl_map.data("location",g.toString());$tl_map.data("longlat",d.toString());b(c)});b(c)});function b(d){var c=false;jQuery(".layers-map").each(function(){var h=d(this);var k=(undefined!==h.data("longlat"))?h.data("longlat"):null;if(null!==k){var l=k.split(",");var m=l[0];var e=l[1]}else{var m="-34.397";var e="150.644"}var f=new google.maps.LatLng(m,e);var j=h.data("zoom-level");$tl_map=new google.maps.Map(h[0],{scrollwheel:false,zoom:j,center:f,mapTypeId:google.maps.MapTypeId.ROADMAP});var g=!d(this).closest("div.layers-contact-widget").hasClass("no-infobox");if(undefined!==h.data("longlat")){var n=new google.maps.LatLng(m,e);$tl_map.setCenter(f);$tl_marker=new google.maps.Marker({map:$tl_map,position:n,zIndex:google.maps.Marker.MAX_ZINDEX+1,icon:TL_CONF.themeurl+"/assets/images/google-marker.png"});if(!c&&g){c=true;d("body").trigger("setInfobox")}else{$tl_marker.setMap($tl_map)}}if(undefined!==h.data("location")&&$tl_marker===false){var i=h.data("location");tl_geocoder.geocode({address:i},function(p,o){if(o==google.maps.GeocoderStatus.OK){$tl_map.setCenter((p[0].geometry.location?p[0].geometry.location:f));$tl_marker=new google.maps.Marker({map:$tl_map,zIndex:google.maps.Marker.MAX_ZINDEX+1,position:(p[0].geometry.location?p[0].geometry.location:f),icon:TL_CONF.themeurl+"/assets/images/google-marker.png"});if(!c&&g){c=true;d("body").trigger("setInfobox")}else{$tl_marker.setMap($tl_map)}}})}})}}(jQuery));
but i am still not sure where to insert google map api key
IIRC, Google maps introduced the api key usage as a recent update and the theme you're using has the older version of the api, one that does not use the api key.
You should check for an update of the theme. If it is an active one, the developer should have incorporated the api key mechanism by now so that you can provide the api key directly somewhere under the theme settings (in wp-admin).
If not, you can try with any of the available Google Maps plugins. I know for a fact that some such plugins work without an api key even today, e.g. the SiteOrigin Widgets Bundle ver. 1.6.1:
https://wordpress.org/plugins/so-widgets-bundle/developers/
Related
I'm working on a React application that uses Google maps. I've been working on it in development mode only and would like to add the API key now when I push it to production.
I'm loading the Google Maps script like the code below and it seems to work, but I would like to only read from my .env and use the API key in production, not when I develop locally on http://localhost:3000/, etc. Does anyone know if there is a simple way to do this?
if (!scriptElementExists) {
// Create a new script tag
const scriptElement = createScriptElement(
'google-maps',
`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_KEY}&callback=${googleMapsData.scriptCallbackName}`
);
// Append the script to the document
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}
My .env
# Google Maps Api Key
REACT_APP_GOOGLE_MAPS_KEY={{API_KEY}}
Thanks beforehand!
And please ask if I've made myself clear.
If you are using Create React App you can use process.env.NODE_ENV.
It is set automatically to development or production.
https://create-react-app.dev/docs/adding-custom-environment-variables
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.
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!
On the site https://gearbottle.com/ I am having an issue where the map will load my geolocation (enable geolocation to see) and then load all results (the entire world) - I need this to stay at the geolocation and not jump to the entire map.
After checking out the console I see "Google Maps API warning: SensorNotRequired //developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required" and then a dropdown of Object etc....After digging a bit i came across the following scripts that still have the sensors in place:
if(ddp('google_places_api')) { if(ddp('google_places_api') != '') { wp_register_script('google_maps_api', 'https://maps.googleapis.com/maps/api/js?key='.ddp('google_places_api').'&sensor=false&libraries=places'); } }
else { wp_register_script('google_maps_api', 'https://maps.googleapis.com/maps/api/js?'); }
}
$google_places_url = 'https://maps.googleapis.com/maps/api/place/autocomplete/xml?key='.ddp('google_places_api').'&sensor=false&input='.$fields[$field->post_name].'&types=(regions)';
$reference_url = 'https://maps.googleapis.com/maps/api/place/details/xml?key='.ddp('google_places_api').'&sensor=false&reference='.$place_reference;
....but I am clueless on what to replace the "Sensor" part in each script to or if this even matters - I really just need the map to stop jumping and that's really it.
This is an older version of a theme that has been reconstructed (purchased by choice)- there is no longer support from original devs, so I am attempting to fix things on my own.
As per the documentation on Google Map Error Codes for SensorNotRequired
The sensor parameter is no longer required for the Google Maps
JavaScript API. It won't prevent the Google Maps JavaScript API from
working correctly, but we recommend that you remove the sensor
parameter from the script element.
It is a warning and you can safely remove &sensor=false from the urls
I am using GMap module in Drupal 7. I have generated the macro code, pasted into contact page, added macro filtering to Filtered HTML text format.
It has worked correctly for about 3-4 hours and then suddenly stopped displaying google map. Instead of map I see the message "Javascript is required to view this map.".
Google maps is displayed correctly on Gmap configuration page. It does not display on the page where I added it as macro. All necessary js files seem to be loaded.
Any ideas?
Have you created API key for rendering Google map? This error usually occurs because of incorrect API key.
Try to edit the existing one or create a new API browser key in https://code.google.com/apis/console/
sitename.com
sitename.com/*
www.sitename.com
www.sitename.com/*
*.sitename.com
*.sitename.com/*
Hope this helps..
How do I check if google API v3 supports current browser? I need some function to do something like this:
if (!FUNCTION_I_AM_LOOKING_FOR()) {
alert('Sorry, your browser is not supported by Google Maps.');
return;
}
I wasn't able to find appropriate function in the API v3 reference
This functionality is currently not available in v3 (it is called GBrowserIsCompatible() in v2). There is an issue filed in the gmail-api-issues tracker.
Edit by OP: Also look here: Google Maps API v3 BrowserIsCompatible