CODEWITHSUNDEEP
csshtmlgoogle-maps
Denny
Denny

Reputation: 1759

Google map with co-ordinates not showing

I am trying to get a google map to show on my site but it's not. I successfully import the required JS file:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

I also got an external JS file with the necessary code imported correctly. It's contents are:

$(document).ready(function () {
  console.log('document ready');
  function initializeMap() {
    console.log('initialize');
    var myOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        myOptions);
  }
  initializeMap();
});

My HTML looks something like (I am using bootstrap3 for my styles):

<div class="container" style="height:100%; width: 100%;">
        <div style="height:100%; width: 100%;">
                <div id="map-canvas">

                </div>
            </div>
</div

But the map doesn't show. However, if I place the code below into the div map-canvas, a map shows

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3988.7878538147397!2d36.828219000000004!3d-1.3022289999999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f111cdbaa9205%3A0xe6a1c22d75cae422!2sAfcon+Limited!5e0!3m2!1sen!2s!4v1416212583057" width="600" height="450" frameborder="0" style="border:0"></iframe>

Upvotes: 1

Views: 107

Answers (2)

Omar
Omar

Reputation: 31732

Your problem is CSS-related, you aren't setting height and width of elements correctly. It work on iframe because you have specified height and width.

Usage of percentage in height is tricky, so you should set it to html and body, and then let child elements inherit body's height. This will fit any screen resolution.

Easy option, be specific and use px, em, etc, instead of percentage.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container,
.container > div,
.container > div #map-canvas {
  height: inherit;
}

Demo

Upvotes: 1

gprathour
gprathour

Reputation: 15333

Have you got your API key ?

Check here

Try with this code

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>

Upvotes: 0

Related Questions