Skip to main content
K
Kevin E.
Inspiring
January 7, 2018
Answered

Embedded google map will not show

  • January 7, 2018
  • 3 replies
  • 4536 views

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

    This topic has been closed for replies.
    Correct answer osgood_

    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.

    <script src="http://maps.googleapis.com/maps/api/js?key=1234567890"></script>

    <script>

    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>

    <div class="templatemo-contact-map" id="map-canvas"> </div>

    3 replies

    K
    Kevin E.Author
    Inspiring
    January 9, 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.

    <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);

    O
    osgood_Correct answer
    Legend
    January 9, 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.

    <script src="http://maps.googleapis.com/maps/api/js?key=1234567890"></script>

    <script>

    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>

    <div class="templatemo-contact-map" id="map-canvas"> </div>

    K
    Kevin E.Author
    Inspiring
    January 30, 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.

    O
    osgood_
    Legend
    January 7, 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>

    <meta charset="UTF-8" />

    <title>Google Map</title>

    <style>

    .templatemo-contact-map {

    margin-bottom: 15px;

    height: 378px;

    }

    </style>

    </head>

    <body>

    <script src="http://maps.googleapis.com/maps/api/js"></script>

    <script>

    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>

    <div class="templatemo-contact-map" id="map-canvas"> </div>

    </body>

    </html>

    K
    Kevin E.Author
    Inspiring
    January 7, 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.

    O
    osgood_
    Legend
    January 8, 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

    B i r n o u
    B i r n o u
    Legend
    January 7, 2018

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices