Geek asks and answers

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

I'm trying to use GMaps.js on github , but for some reason it does not work, I'm sure I typed it correctly if someone can point me in the right direction thanks. ( http://i.imgur.com/3LkL6xS.png the actual photo in case there is not enough.)

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>
+5
source share
4 answers

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

This is where jsfiddle works: 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
    });
});

​​ .
, css. .

+14

(, )

, "gmaps.js"...

gmaps.js(v4.5.0) getElementById.

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

:

  • gmaps.js , div: 'basic_map' el: 'basic_map' → .
  • WRONG = div: '#basic_map', CORRECT = div: 'basic_map'.
  • div CSS

.:)

+4

. , div. firebugs, , .

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

+2
$(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
    });
});

div:

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

id div "map" :

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

div:

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

More articles:


All Articles