Embedded google map will not show

Report · Jan 07, 2018

Hello,

I have an embedded Google map in the web page I am working on. It shows up fine in the DW page and the preview page, but when I go to the live page, it doesn't appear. Any idea what might be wrong? Thank you.

Kevin

http://www.pineforest88reunion.com

Report · Jan 07, 2018

when you had generated the key, did you include the website dns ?

Report · Jan 07, 2018

Try the below. Just copy the code block between the <body> </body> tags and insert it into your page code where you want the map to appear. I thought that these days you needed a Google maps api key but the below works for me.

<!DOCTYPE html>

<html>

<head>

<title>Google Map</title>

<style>

.templatemo-contact-map {

margin-bottom: 15px;

height: 378px;

}

</style>

</head>

<body>

var myCenter=new google.maps.LatLng(35.0804922, -78.9648236);

function initialize()

{

var mapOptions = {

center: myCenter,

zoom:16

};

var map=new google.maps.Map(document.getElementById("map-canvas"),mapOptions);}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</body>

</html>

Report · Jan 07, 2018

I am building the site based on a template. The way they have the current map embedded is a little foreign to me...it is not in the source, but instead in the java script file templatemo_script.js . Overall, their coding is a bit more sophisticated than I am used to working with. I'm just trying to figure out where I should put the code that you suggested. I basically just want the map in the same place.

Report · Jan 08, 2018

https://forums.adobe.com/people/Kevin+E. wrote
I'm just trying to figure out where I should put the code that you suggested. I basically just want the map in the same place.

In my first post I wrote:

'Just copy the code block between the <body> </body> tags and insert it into your page code where you want the map to appear.'

OK I think we are all missing a trick here except for Birnou.

As I noted in my first post I thought these days you needed an api key for the map to work remotely and I think that is where your issue may lie. It works locally without an api key and that is why you can see it locally.

If you look at your javascript inspector in your broswer you will get an API error:

Google Maps API error: MissingKeyMapError

Report · Jan 08, 2018

Here you got an step by step of getting google api https://developers.google.com/maps/documentation/javascript/get-api-key

Report · Jan 07, 2018

If you need to embed the map in a part of your website, you just neet to use this code on yuor HTML file

var myCenter=new google.maps.LatLng(35.0804922, -78.9648236);

function initialize()

{

var mapOptions = {

center: myCenter,

zoom:16

};

var map=new google.maps.Map(document.getElementById("map-canvas"),mapOptions);}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

Plus, you will ne to add the jeight and width of the div that suport it and add this to your css file or the head style of your webpage

<style>

.templatemo-contact-map {

margin-bottom: 15px;

height: 378px;

}

</style>

Report · Jan 08, 2018

Am I reading this correctly? In order to embed google maps and your website, you now have to pay?

Report · Jan 08, 2018

https://forums.adobe.com/people/Kevin+E. wrote
Am I reading this correctly? In order to embed google maps and your website, you now have to pay?

No. Not unless your site gets a huge amount of traffic.

Users of the standard API:

Free until exceeding 25,000 map loads per 24 hours

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 08, 2018

Okay. I followed the instructions and got an api key from Google. However, it says then to substitute the key in the code where it asks for. Below is what they said it should look like, but it is nowhere in my code.

The closest I have found is this:

// load google map
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
            'callback=initialize';
        document.body.appendChild(script);

Report · Jan 09, 2018

https://forums.adobe.com/people/Kevin+E. wrote
Okay. I followed the instructions and got an api key from Google. However, it says then to substitute the key in the code where it asks for. Below is what they said it should look like, but it is nowhere in my code.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
The closest I have found is this:
// load google map
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
            'callback=initialize';
        document.body.appendChild(script);

The below line in the .js file is where you should insert your API key:

script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=1234567890'

However when I tried that yeterday it did not work. It did work if I use the stand-alone code below just inserted in the page where you need the map to appear, although I have no idea if there will be a conflict with what is in the js file.

var myCenter=new google.maps.LatLng(35.0804922, -78.9648236);

function initialize()

{

var mapOptions = {

center: myCenter,

zoom:16

};

var map=new google.maps.Map(document.getElementById("map-canvas"),mapOptions);}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

Report · Jan 29, 2018

http://www.pineforest88reunion.com

I'm back...
I ended up changing the site, using a different template. But I am still having the same problem with the map. I did get a API key from google, but can't seem to find a place to put it that works. I tried someone's suggestion of putting the code they suggested directly into the index file, but that did not work either. If you could, please take a look and see if you can tell where it should go.

Report · Jan 30, 2018

osgood_ 's solution should work, but if you are financial enough you may like to purchase the extension that I use, namely https://www.dmxzone.com/go/22780/dmxzone-google-maps-2. A cheaper option and one that I have not tried/used is found at Maps Inserter for Google Maps

Wappler, the only real Dreamweaver alternative.

Report · Jan 30, 2018

BenPleysier wrote
you may like to purchase the extension that I use, namely https://www.dmxzone.com/go/22780/dmxzone-google-maps-2.

Humm....... at least 2 of the examples using dmx google maps dont work, below is one of them

Travel Agency - Caribbean Tours | Deals

So I'm assuming since those demos were created someting else needs to be added into the mix, maybe the API key.

Report · Jan 30, 2018

Oops, the Google map extension has been upgraded to https://www.dmxzone.com/go/33070/app-connect-google-maps/

Apparently, some of the show cases have not been upgraded as yet.

Wappler, the only real Dreamweaver alternative.

Report · Jan 30, 2018

I would if it would solve my problem, but I can't spare a hundred bucks right now. But what is offers is pretty cool!

Report · Jan 30, 2018

I've opened the IE Debugger, but can't figure out how to get it to do anything. It just shows the code on the left, and two blank windows on the right.

Actually, I opened it in Firefox and now it is working. It is pointing me to the util.js file, line 248 but I don't see where I would enter an API code. And on top of that, DW says it is a remote file and cannot be edited.

.util.js:248 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Embedded google map will not show

1 Correct answer