CODEWITHSUNDEEP
javascriptruby-on-railsgoogle-mapsgoogle-maps-api-3
steve chen
steve chen

Reputation: 33

Google Maps JS example not showing

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </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=AIzaSyBlcVddNcJrrifavMfBBHkGhmh8ajmskbU&callback=initMap"
    async defer></script>
  </body>

I'm trying to get this map from this tutorial to display in my Rails 4 app. https://developers.google.com/maps/documentation/javascript/examples/map-simple

With the API key it seems to disappear completely without showing any messages in the console.

But without the key it shows enter image description here

Upvotes: 3

Views: 1299

Answers (1)

ScaisEdge
ScaisEdge

Reputation: 133400

This work for me 

<!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
          #map {
            height: 100%;
          }
        </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=AIzaSyBlcVddNcJrrifavMfBBHkGhmh8ajmskbU&callback=initMap"
        async defer></script>
    </body>
</html>

anyway add also a width to map container 

     #map {
        height: 100%;
        width: 100%;
      }

Upvotes: 2

Related Questions