CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Datsik
Datsik

Reputation: 14824

I don't see anything wrong, but the map will not appear (using gmaps.js from github)

I'm trying to use the GMaps.js in github but for some reason it is not working, I'm pretty sure I have typed it out right, if anybody could point me in the right direction thanks. (https://i.sstatic.net/Yae0Q.png actual photo in case it isn't big enough on here.)

Broken Code

Here is the new source code: 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBi7e8AiTyqWiFt9vlbGqsAzGyRhVWqCsk&sensor=true"></script>
<script src="js/gmaps.js"></script>
<script>
/**
  * Basic Map
  */
$(document).ready(function(){
 var map = new GMaps({
    div: '#basic_map',
    lat: 51.5073346,
    lng: -0.1276831,
    zoom: 12,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : false,
  });
});
</script>
</head>
<body>
<div id="basic_map"></div>
</body>
</html>

Upvotes: 5

Views: 10876

Answers (4)

JRandria
JRandria

Reputation: 1

$(document).ready(function () {
    var map = new GMaps({
        div: '#basic_map',
        lat: 51.5073346,
        lng: -0.1276831,
        width: '500px',  --->You must add this
        height: '500px',---->And this in your map declaration
        zoom: 12,
        zoomControl: true,
        zoomControlOpt: {
            style: 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl: false
    });
});

in your div:

<div id="basic_map"></div>

or you change the div id to "map" and create style:

 <style type="text/css">
    #map {
         width: 700px;
          height: 500px;
          border: 1px solid #a0a0a0;
    }
  </style>

In your div :

<div id="map" class="map"></div>

Upvotes: 0

Chris
Chris

Reputation: 41

(Please excuse my poor English)

I solved this problem by taking a look at the "gmaps.js"-file...

gmaps.js (v4.5.0) uses getElementById.

if (typeof(options.el) === 'string' || typeof(options.div) === 'string') {
      this.el = getElementById(container_id, options.context);
    } else {
      this.el = container_id;
    }

Conclusion:

  1. gmaps.js doesn't care if you're using div: 'basic_map' or el: 'basic_map' -> both will work fine.
  2. WRONG = div: '#basic_map', CORRECT = div: 'basic_map'.
  3. Specify the width and height of the div with some CSS

Refresh and be happy. :)

Upvotes: 4

Kedor
Kedor

Reputation: 1498

As I said in the comment, you are probably missing the width and height of the div, you try show map in.

Here is working jsfiddle: jsFiddle to play with

$(document).ready(function () {
    var map = new GMaps({
        div: '#basic_map',
        lat: 51.5073346,
        lng: -0.1276831,
        width: '500px',
        height: '500px',
        zoom: 12,
        zoomControl: true,
        zoomControlOpt: {
            style: 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl: false
    });
});

Added width and height to the code.
Or Here you have the same result, with width and height in css. Not much difference.

Upvotes: 14

Qian
Qian

Reputation: 1027

i tested the code. maybe you should set the width & height of your div element. you could use firebugs to check if the map is already created

change your div like this <div id="basic_map" style="height: 100px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">

Upvotes: 2

Related Questions