Adding a Google Maps API Key to a Muse website

New Here ,
May 22, 2018 May 22, 2018

Copy link to clipboard

Copied

Hi,

Google Maps is changing, and as from June 11th 2018 Keyless maps will no longer display correctly.

I am unable to find a way of adding my Google Maps API Key to the standard Google Maps widget.

I've paid for Google Maps Pro from eclipse which allows me to enter a Key but this widget doesn't seem to work at all?

I've seen a YouTube video that shows right clicking on the Maps widget in the page and then being able to edit the HTML by inserting the API code but when I try this the right click contextual menu does got give me an “Edit HTML" option?

If anyone can tell me how to add my Google Maps API Key to a Muse website then I would be very grateful.

Thank you

Views

2.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Explorer , Jun 01, 2018 Jun 01, 2018
Hey guys, Jason here from MuseGrid.  The built-in Google Map widget from Muse will be affected.  It's using what is referred to as the "Embed API" which leverages an iFrame.  That widget, as it stands, does not use an API key.  That's why we updated our Google Maps bundle to include an "Embed" version that includes an API key option...and also make it purchasable without a membership.We also provide all of the tutorials necessary to get you setup and answer many of the "whys".Thanks

Likes

Translate

Translate
May 22, 2018 May 22, 2018

Copy link to clipboard

Copied

Hey louisn,

I suggest you to go with embedding Google Map code in side your site as explained here - Adobe Muse - How to embed a Google Map into a Muse Website.

You can only tweak the custom HTML codes by right clicking into your muse site.

Regards,

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 23, 2018 May 23, 2018

Copy link to clipboard

Copied

Hi,

I've followed the instructions in the video but the options to embed a Google map on the Google maps website have changed now since that video was posted in 2013.

Google still lets you customise the map size but then the only code it lets you grab to embed it is an Iframe which has no obvious place within the code to add my API key.

Louis

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

Hi - yes I got this message this morning Google Maps Embed Widgets v3 | Adobe Muse  - so can you tell me if Adobe is going to provide a fix for their google maps widget?

Thanks
Pete

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

Jason Tinnin from musegrid.com will shortly answer in this thread. The widget from muse out of the box will not work anymore. Not sure if the first post from ankushr40215001​ will handle that API issue as well.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

Hey guys, Jason here from MuseGrid.  The built-in Google Map widget from Muse will be affected.  It's using what is referred to as the "Embed API" which leverages an iFrame.  That widget, as it stands, does not use an API key.  That's why we updated our Google Maps bundle to include an "Embed" version that includes an API key option...and also make it purchasable without a membership.

We also provide all of the tutorials necessary to get you setup and answer many of the "whys".

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 24, 2018 Jun 24, 2018

Copy link to clipboard

Copied

When I export a site from Muse with a Google Map it works absolutely fine. I am glad I did not spend money on unnecessary widgets being pushed by scaremongers.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

I’ve been trying the Google Maps Pro Widget from Muse Gain as an alternative.

I’ve worked through the process of generating a new API key and have added this new key to Muse and republished 2 of my sites as tests but the console in Google Chrome and the web inspector in Safari are still showing error messages, one in particular 'Invalid API key'. I have enabled http restrictions in Google and added both domains to the settings for the key but the errors still show.

The widget does show a map now, although Chrone seems to show an ‘Oops’ messages instead of the map on some sites. The maps show in Safari and Firefox though.

The guys at Muse Gain have been helpful to be fair but I’m still a way off getting this working properly.

Google have made something that was very simple incredibly complicated now and I’m finding myself stuck between their new maps service which seems to have been built with huge companies in mind, not the little guy and a final version of Muse which was only resleased a while ago but is already becoming obsolete very quickly.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

Simply pick up our $29 Google maps bundle which will solve your problem and we have tutorials that walk you step-by-step through the process. We made it $29 to be affordable to any budget and completely disconnected from any membership. We have literally done the work for you already it’s just $29.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

Watch the post from Jason Tinnin (three posts before) from musegrid.com.

On their website they also show how to get this API.

Best Regards,

Uwe

P.S. Now it is one post up

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

www.musegrid.com/lp/google-maps/index

Sent from my iPhone

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

Does this include a tutorial on obtaining a new API key from Google Cloud, the new way where you have to enable billing?

I can’t be certain I’ve got the Google Cloud settings for key correct that’s the problem and Google won’t help unless you sign up for a bronze support package at $150 a month!

At the moment I’m not sure if it’s the Muse Widget I’m using that is causing the problem because it’s not compatible with the new API keys or if I’ve missed something in the Google Cloud settings?

I appreciate everyones Help. Thank you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

Just purchase the $29 bundle, follow the tutorials exactly, if you get stuck you can connect with us on live chat and we will walk you through any questions you have. From the sound of it it seems you could use some help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

Call me Captain Obvious, but why do Musers keep fighting with has-been widgets and workarounds instead of learning code basics?  If you can work with code, this is a very simple copy & paste job.

As an example:

<!DOCTYPE html>
<html>
 
<head>
   
<title>Simple Map</title>
   
<meta name="viewport" content="initial-scale=1.0">
   
<meta charset="utf-8">
   
<style>
     
/* Always set the map height explicitly to define the size of the div
      * element that contains the map. */

     
#map {
       
height: 100%;
     
}
     
/* Optional: Makes the sample page fill the window. */
      html
, body {
       
height: 100%;
       
margin: 0;
       
padding: 0;
     
}
   
</style>

 
</head>
 
<body>
   
<div id="map"></div>
   
<script>
     
var map;
     
function initMap() {
        map
= new google.maps.Map(document.getElementById('map'), {
          center
: {lat: -34.397, lng: 150.644},
          zoom
: 8
       
});
     
}
   
</script>

   
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"
   
async defer></script>

 
</body>
</html>

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

And now, Nancy, please tell us, how to handle your code snippet in Muse!

I assume, this is a little bit simpler: https://developers.google.com/maps/documentation/embed/guide?hl=En

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

Sadly, that's the big Muse limitation.   Short of exporting your MU project to HTML code and opening it in a code editor, you're entirely at the mercy of Widgets that may or may not get the job done.  

You could create a new plain vanilla page in Dreamweaver or any code editor you like, paste in your Google Map code with unique API Key.   Save.  Use an iframe in Muse to pull the Map page into your web page.  A clumsy workaround to be sure but probably the best you can hope for with Muse.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

Nancy, are you really familiar to working with Muse?

My link above show a simpler way to integrate a standard Google map and API key into Muse using an iframe — just as provided and explained by Google.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

yes you can add custom code to Muse but it is hard for most Muse users to understand and not the same as copy | paste works in Dreamweaver... I marked the Musegrid option correct because the op wants a widget

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 06, 2018 Jun 06, 2018

Copy link to clipboard

Copied

Hi Ussnorway --

Thanks for providing this info and link to google.  I've looked at googles info, and still have a question:  Where do I paste the iFrame code snippet? 

I'm not sure what iFrame is, nor how to embed it in a muse site....but i'm hopeful based on your advice that it will be as easy as 1 -2 -3. 

Thanks again!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 06, 2018 Jun 06, 2018

Copy link to clipboard

Copied

welcome but I think you must be talking about the post Günter Heißenbüttel made?

Iframe 1,2, 3 =

  • use the insert html option from Muse

Screenshot (183).png

things that can go wrong and the fix;

  • remove unwanted spaces... a common issue and the main problem with copy | paste actions

Screenshot (184).png

  • the key needs to be valid or Google will refuse it

Screenshot (185).png

also just fyi width 100% = bad code... note the example from Google shows an iframe of 600 and that is always the better option because the browser will auto adjust that if needs be

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 07, 2018 Jun 07, 2018

Copy link to clipboard

Copied

Can I still link a button on my website to a location on Google Maps?

Or will this cause an error too?

I do not need the map to be viewed in my website but just link to Google Maps

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 07, 2018 Jun 07, 2018

Copy link to clipboard

Copied

A link will cause no problems.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 07, 2018 Jun 07, 2018

Copy link to clipboard

Copied

Thanks!

🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jun 04, 2018 Jun 04, 2018

Copy link to clipboard

Copied

Hey everyone,

I would like to you inform you all that our team is working towards updating the Google widget to sync with the latest changes to Google maps.

Will update this thread with more further info once our discussion is complete.

Regards,

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 05, 2018 Jun 05, 2018

Copy link to clipboard

Copied

Hi Ankush,

I'm please Adobe is going to update the standard Google Maps widget within Muse.

Can you tell me if this means a new version of Muse will be released? And will this fix for the Maps be released before the June 11th changes to Google Maps?

Thanks,

Louis

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines