Google maps not working

Permalink 1 user found helpful
Hello Concrete5 members,

I installed a second Concrete5 with the same theme on a different domain.
Everything is exactly the same apart from the language.

When I reload the page I can see that it is working and showing the right location.
After one second it just shows an error.

When adding a new Google maps block I can't enter a location because it is blocking it.
Sometimes I can enter a location but than it shows: undefined

Google maps does not work and shows the following error:
Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.

js:32 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error_.ab @ 
js:32
util.js:211 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys


See attachement

2 Attachments

nesoor
View Replies: View Best Answer
mesuva replied on at Permalink Reply
mesuva
It looks like Google have very recently updated their policy about adding maps without using a key:http://googlegeodevelopers.blogspot.com.au/2016/06/building-for-sca...

Existing keyless installs will continue to work, but maps placed on domains where there hasn't been a map before require a key.

As the default concrete5 block doesn't have an interface to allow a key to be used, you may need to override/hack the block's controller to add it in.
nesoor replied on at Permalink Reply
nesoor
Hey Mesuva,

Thanks for your reply ! Any idea where I can place that key and how?
Should I report this as a bug? Maybe the Concrete5 community will fix it :)
mesuva replied on at Permalink Reply
mesuva
I've already posted this as an issue:https://github.com/concrete5/concrete5/issues/3986...

To place the key, you'll need to override the google_map block's controller.php file, adding in the key to the script that is output by the registerViewAssets function.

- Create a folder google_map in /application/blocks
- Copy the controller.php file from /concrete/blocks/google_map/ into this new folder
- Rename the namespace the top of this file to:
namespace Application\Block\GoogleMap;
- Find the location where the script is output in the registerViewAssets function, and add in the key to the end of the script:
public function registerViewAssets($outputContent = '')
    {
        $this->requireAsset('javascript', 'jquery');
        $this->addFooterItem(
            '<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>'
        );
    }
nesoor replied on at Permalink Reply
nesoor
Hey Mesuva,

Thank you for your help!
I enabled the API services en generated a key. I placed the key in the script but yet Google maps is not working.
Maybe I am doing something wrong?
mesuva replied on at Permalink Reply
mesuva
- Can you see your key in the source of your page?
- Does the console show and error still?
- I believe that you need to configure the key to have a list of one more domains that it is for, have you also done that step?
nesoor replied on at Permalink Reply
nesoor
Hey Mesuva,

I can't check the console again, I am unable to place the Google maps block.

I have enabled:
Google Static Maps API
Google Maps Embed API
Google Maps JavaScript API

Accept requests from these HTTP referrers:
Added all my domains

Domain verification:
Added all my domains

I copied the controller.php in the application/blocks/google_map folder and edited the namespace and placed the key in the script.

I appreciate your help !
mesuva replied on at Permalink Reply
mesuva
So when you try to add the map block, what actually happens?
Does it show any kind of error at all?

Have you tried clearing the cache?
nesoor replied on at Permalink Reply 1 Attachment
nesoor
Hey Mesuva,

I can drag the Map block to a location but when I try to enter a adres it grayed out.
See attachment.
mesuva replied on at Permalink Reply
mesuva
When that happens, is there an error message in your console?
nesoor replied on at Permalink Reply 1 Attachment
nesoor
Hey Mesuva,

It says multiple times on this page? I do not have any Google maps on my website.
I also just added the key once ofcourse.

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
Yg   @   js?libraries=places&callback=window.C5GMaps.setupAutocomplete&_=1466928990496:95
(anonymous function)   @   js?libraries=places&callback=window.C5GMaps.setupAutocomplete&_=1466928990496:128
google.maps.Load   @   js?libraries=places&callback=window.C5GMaps.setupAutocomplete&_=1466928990496:21
(anonymous function)   @   js?libraries=places&callback=window.C5GMaps.setupAutocomplete&_=1466928990496:128
(anonymous function)   @   js?libraries=places&callback=window.C5GMaps.setupAutocomplete&_=1466928990496:129
Google Maps API warning: NoApiKeys 
https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
_.ab         @   js?libraries=places&callback=window.C5GMaps.setupAutocomplete&_=1466928990496:35
(anonymous function)   @   common.js:51
(anonymous function)   @   common.js:189
c         @   common.js:45
(anonymous function)   @ AuthenticationService.Authenticate?1shttps%3A%2F%2Fwww.mywebsite.com%2Findex.php%3FcID%3D1
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
mesuva replied on at Permalink Reply
mesuva
Ahhh - there's another place it loads in the google script.

Try copying auto.js from the core block directory alongside the controller.php as well.
In that towards the top you'll see a line where it pulls in the script as well, change that to:
$('head').append($(unescape("%3Cscript src='https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=window.C5GMaps.setupAutocomplete' type='text/javascript'%3E%3C/script%3E")));


The warnings about including the script several times can pretty much be ignored.
nesoor replied on at Permalink Reply 3 Attachments
nesoor
Hey Mesuva,

Now I can enter an adres but Google maps can't find any adres.
See attchements error log and photos
mesuva replied on at Permalink Best Answer Reply
mesuva
It took me a while, but I found I had to enabled the 'Google Places API Web Service' API as well.

So to get it completely working, I had to enable for the API Key both 'Google Places API Web Service' and 'Google Maps JavaScript API'.
nesoor replied on at Permalink Reply
nesoor
Hey Mesuva,

Your the best ! Thank you for your time i really appreciate it !
Google maps works perfectly now :)
JurgenKurz replied on at Permalink Reply
Thanks all, I had also to move the code to view( as mentionned in this thread to finally solve the issue.

https://www.concrete5.org/developers/bugs/5-7-5-8/google-maps-block-...
jero replied on at Permalink Reply
jero
Just to add my 10 cents to the discussion: I've never been a fan of duplicating code - it makes things challenging when you upgrade because you risk breaking stuff.

While you can override the entire controller, it's not necessary to do that. You can get away with extending the core and overriding just the one method instead:

<?php
namespace Application\Block\GoogleMap;
use Concrete\Block\GoogleMap\Controller as GoogleMapController;
class Controller extends GoogleMapController
{
    public function registerViewAssets($outputContent = '')
    {
        $this->requireAsset('javascript', 'jquery');
        $this->addFooterItem(
            '<script defer src="https://maps.googleapis.com/maps/api/js?key=myApiKey"></script>'
        );
    }
}


Works nicely on the site I just made live today on a new domain where the map stopped working.
mesuva replied on at Permalink Reply
mesuva
Couldn't agree with this more, THIS is the way to make the override. Nice and clean!
mauisys replied on at Permalink Reply
Where can I find this code to make the update? Just started using maps today and running into the same problems.

Thanks!
Advite replied on at Permalink Reply
Advite
Hi Everyone,

Just as Mesuva already mentioned, Google maps now requires an API key as of the 22nd June.

As you can see this is now causing issues on C5 installs trying to implement a Google maps block post June 22.

As an alternative to copying / changing code you can install the Styled Maps add-on which as of v1.2.0 (released Monday) now accepts a Google maps API key via a form.

You can find the add-on here,

https://www.concrete5.org/marketplace/addons/styled-maps...

And information on obtaining an API here

https://www.concrete5.org/marketplace/addons/styled-maps/how-to-get-...

This add-on is completely free and I hope the community finds it useful.
amrod replied on at Permalink Reply
amrod
In C5.6 the maps are still working?
Do we need to apply update for google maps block in 5.6 ?
JohntheFish replied on at Permalink Reply
JohntheFish
I would expect you to have problems if installing on a new URL.
amrod replied on at Permalink Reply
amrod
how we can fix it? localhost not working no more :(
JohntheFish replied on at Permalink Reply
JohntheFish
While waiting for a new 5.6.x release, I would expect the temporary fix that @mesuva posted for 5.7 would easily adapt to 5.6.
amrod replied on at Permalink Reply
amrod
very quick fix;
edit the file;
\concrete\core\controllers\blocks\google_map.php line #72
add your key to KEY;
and delete the sensor;

$this->addFooterItem('<script type="text/javascript" src="//maps.google.com/maps/api/js?key=KEY&language=' . rawurlencode(str_replace('_', '-', Localization::activeLocale())) . '"></script>');


now working on localhost + c5.6 + google maps
manup replied on at Permalink Reply
manup
Go to map.google.com

Locate your location

Get embed map -> copy iframe content

And add it as an 'HTML' block

**I hope concrete5 5.8 version will have a solution for its google map block
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi nesoor,

concrete5 5.7.5.9 includes a quick fix for this issue. An input for an API key and a button for checking if the key is valid.
emparel replied on at Permalink Reply
emparel
5.6 ONLY ------------------------------- specifically tested on 5.6.3.3

Came here looking for a fix to 5,6 but did not find it so here is my quick fix.

I fixed this in 5.6 by the following code to override the on_page_view method in the controller.php

Change YOUR_KEY_HERE to your google key.

Then in blocks folder in the root create a folder called google_map

In this place the following code in file called controller.php

Hope this helps :)

<?php
defined('C5_EXECUTE') or die("Access Denied.");
class GoogleMapBlockController extends Concrete5_Controller_Block_GoogleMap {

public function on_page_view() {
$balloonHtml = '';
if($this->balloonShow) {
$balloonHtml = '<div style="overflow:hidden;white-space:nowrap;">';
if(strlen($this->balloonContent)) {
$balloonHtml .= Loader::helper('content')->translateFrom($this->balloonContent);
}
if($this->balloonWithLinkToMaps) {
$balloonHtml .= '<div style="font-size: smaller"><a href="//maps.google.com?' . h('ll=' . $this->latitude . ',' . $this->longitude . '&daddr=' . $this->latitude . ',' . $this->longitude . '&z=' . $this->zoom) . '" target="blank">' . h(t('Get Directions')) . '</a>  </div>';
}
$balloonHtml .= '</div>';
$this->set('balloonHtml', $balloonHtml);
}
$html = Loader::helper('html');
$c = Page::getCurrentPage();
if (!$c->isEditMode()) {
$this->addFooterItem('<script type="text/javascript" src="//maps.google.com/maps/api/js?key=YOUR_KEY_HERE&sensor=true&language=' . rawurlencode(str_replace('_', '-', Localization::activeLocale())) . '"></script>');
$this->addFooterItem('<script type="text/javascript">
function googleMapInit' . $this->bID . '() {
try{
var latlng = new google.maps.LatLng(' . $this->latitude . ', ' . $this->longitude . '), balloonHtml = ' . Loader::helper('json')->encode($balloonHtml) . ', balloon;
var mapOptions = {
zoom: ' . $this->zoom . ',
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById(\'googleMapCanvas' . $this->bID . '\'), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
if(balloonHtml) {
balloon = new google.maps.InfoWindow({content: balloonHtml});
google.maps.event.addListener(marker, "click", function() {
balloon.open(map, marker);
});
setTimeout(function() {
balloon.open(map, marker);
}, 500);
}
}catch(e){
$("#googleMapCanvas'. $this->bID .'").replaceWith("<p>Unable to display map: "+e.message+"</p>")}
}
$(function() {
var t;
var startWhenVisible = function (){
if ($("#googleMapCanvas'. $this->bID .'").is(":visible")){
window.clearInterval(t);
googleMapInit' . $this->bID . '();
return true;
}
return false;
};
if (!startWhenVisible()){
t = window.setInterval(function(){startWhenVisible();},100);
}
});
</script>');
}
}




}
mcaconsult replied on at Permalink Reply
Tried your fix for 5.6 but could not get it to work. Can you explain the setup a little more?

Thanks
emparel replied on at Permalink Reply
emparel
Hi,
1. Go to the blocks folder you see when you are at the root of your web folder.
2. Create a folder named google_map
3. Put the code I have supplied above
4. In that code, find the text YOUR_KEY_HERE and replace it with your google API key.

If going through this one again does not work for you can you give me some idea of what error/situation you are getting.?

Regards
mcaconsult replied on at Permalink Reply
I double checked the file and found there was a problem with my Google Key in the file.

I repaired it and now it works fine.

Google Maps now work.

Thanks so much for adding your "fix" for 5.6. I have some sites that migrating to 5.7 or 5.8 is just not going to be worth the trouble so I will continue to use 5.6.

Google Maps now work.
remodion replied on at Permalink Reply
Thank you so much for your quick fix for 5.6!!!

Helped me a lot.

It works now.

Regards