Forum

Thread tagged as: Problem, Error

Google map not showing on a https page

SUMMARY INFORMATION

Perch Runway: 2.8.34, PHP: 7.1.0, MySQL: 10.0.27-MariaDB, with PDO
Server OS: Linux, litespeed
Installed apps: content (2.8.34), assets (2.8.34), categories (2.8.34), perch_blog (5.0), perch_forms (1.8.3), perch_kraken (1.0), perch_backup (1.2)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_blog', 'perch_forms' );
PERCH_LOGINPATH: /perch
PERCH_PATH: /home/stitchex/public_html/perch
PERCH_CORE: /home/stitchex/public_html/perch/core
PERCH_RESFILEPATH: /home/stitchex/public_html/perch/resources
Image manipulation: GD Imagick
PHP limits: Max upload 8M, Max POST 8M, Memory: 128M, Total max file upload: 8M
F1: 6a33f95eca3667f9e0c39bf5ca2980fe
Resource folder writeable: Yes
HTTP_HOST: stitchexhibitionfabrics.co.uk
DOCUMENT_ROOT: /home/stitchex/public_html
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php

It says InvalidKeyMapError how do I fix this error?

The map shows the following text with a grey background instead of the map (on a https page): Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details.

The error message in the console is: Failed to load resource: the server responded with a status of 400 () maps.googleapis.com/maps/api/js?key=undefined:34 Google Maps API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error _.jb @ maps.googleapis.com/maps/api/js?key=undefined:34 maps.googleapis.com/maps-api-v3/api/js/27/6/util.js:211 Google Maps API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key ZA.j @ maps.googleapis.com/maps-api-v3/api/js/27/6/util.js:211

David Roberts

David Roberts 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Have you added a Maps API key?

No , this was set up by somebody else.

I read below that I need one, is that correct?

https://developers.google.com/maps/documentation/javascript/tutorial

Drew McLellan

Drew McLellan 2638 points
Perch Support

Instructions for configuring are here: https://docs.grabaperch.com/templates/field-types/map/

Thanks. Added that but still seem to have the same issue. The map is there behind the grey panel at the front. The rest is already set up:

<div class="map">

    <perch:content id="map" type="map" label="Address" width="600" height="400" zoom="15" />

</div>
Drew McLellan

Drew McLellan 2638 points
Perch Support

Have you re-saved your content region since making the change?

Hi David,

Just a thought... when you generated the Google map API key you are pointed towards adding the url(s) you are using for your site, to stop the API being used by anyone else. If you did this, did you include the https:// version?? Even if you enter the url for the API as www.domain.com you will also find that trying to view domain.com with out the www won't work. You have to list all combinations.

It still saying the size is incorrect but this looks like it is generated by the API The Google Maps API server rejected your request. Invalid request. Invalid 'size' parameter. I guess it does not like the width 100%?

<img id="cmsmap1301-1" src="//maps.google.com/maps/api/staticmap?center=51.374329,-0.8944343000000572&amp;size=100%x400&amp;zoom=11&amp;maptype=map&amp;markers=color:red|color:red|51.374329,-0.8944343000000572"  width="100%" height="400" alt="Unit 11B, Hogwood Farm  Sheerlands Road  Finchampstead  Berkshire  RG40 4QY" /><script type="text/javascript">/* <![CDATA[ */ if(typeof CMSMap =='undefined'){var CMSMap={};CMSMap.maps=[];document.write('<scr'+'ipt type="text\/javascript" src="/perch/core/assets/js/public_maps.min.js"><'+'\/sc'+'ript>');}CMSMap.maps.push({'mapid':'cmsmap1301-1','width':'100%','height':'400','type':'map','zoom':'11','adr':'Unit 11B, Hogwood Farm  Sheerlands Road  Finchampstead  Berkshire  RG40 4QY','lat':'51.374329','lng':'-0.8944343000000572','clat':'51.374329','clng':'-0.8944343000000572'});/* ]]> */</script>
Drew McLellan

Drew McLellan 2638 points
Perch Support

As per the documentation, width and height need to be integers. 100% doesn't mean anything to Google's server.

Console > - :)

Had to reload /clear and re-input date but fixed.