Google maps not working
Permalink 2 users 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.
See attachement
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
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 :)
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 :)
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:
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>' ); }
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?
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?
- 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?
- 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?
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 !
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 !
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?
Does it show any kind of error at all?
Have you tried clearing the cache?
Hey Mesuva,
I can drag the Map block to a location but when I try to enter a adres it grayed out.
See attachment.
I can drag the Map block to a location but when I try to enter a adres it grayed out.
See attachment.
When that happens, is there an error message in your console?
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.
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
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:
The warnings about including the script several times can pretty much be ignored.
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.
Hey Mesuva,
Now I can enter an adres but Google maps can't find any adres.
See attchements error log and photos
Now I can enter an adres but Google maps can't find any adres.
See attchements error log and photos
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'.
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'.
Hey Mesuva,
Your the best ! Thank you for your time i really appreciate it !
Google maps works perfectly now :)
Your the best ! Thank you for your time i really appreciate it !
Google maps works perfectly now :)
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-...
https://www.concrete5.org/developers/bugs/5-7-5-8/google-maps-block-...
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:
Works nicely on the site I just made live today on a new domain where the map stopped working.
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.
Couldn't agree with this more, THIS is the way to make the override. Nice and clean!
Where can I find this code to make the update? Just started using maps today and running into the same problems.
Thanks!
Thanks!
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.
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.
In C5.6 the maps are still working?
Do we need to apply update for google maps block in 5.6 ?
Do we need to apply update for google maps block in 5.6 ?
I would expect you to have problems if installing on a new URL.
how we can fix it? localhost not working no more :(
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.
very quick fix;
edit the file;
\concrete\core\controllers\blocks\google_map.php line #72
add your key to KEY;
and delete the sensor;
now working on localhost + c5.6 + google maps
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
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
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
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.
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.
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>');
}
}
}
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>');
}
}
}
Tried your fix for 5.6 but could not get it to work. Can you explain the setup a little more?
Thanks
Thanks
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
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
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.
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.
Thank you so much for your quick fix for 5.6!!!
Helped me a lot.
It works now.
Regards
Helped me a lot.
It works now.
Regards
Thank you very much emparel, this fixed one of my 5.6 sites with broken maps!
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.