gmaps.js Api doesn't work

Question

I want to add a googlemap to my html page using gmaps.js api. I put the gmaps.js file to same folder with my html page but when i try to load my html page nothing happens below is my code

html:

<!DOCTYPE html>
<html>
<head>

   <meta charset="utf-8">

   <title>TaxiPolis|@Web-taxi</title>

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

   <script type="text/javascript" scr="gmaps.js"></script>

   <link rel="stylesheet" type="text/css" href="web_taxi_css.css"/>

   <script type="text/javascript" src="web_taxi_java.js"></script>

  </head>

  <body>

   <div id="map_canvas"></div>
  </body>
  </html>

css:

       @charset "utf-8";
      /* CSS Document */

     body{
          width:100%;
          height:100;
        }

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

javascript:

    $(document).ready(function() {

          var map = new GMaps({
          div: '#map_canvas',
          lat: -12.043333,
          lng: -77.028333
         });
    });

So when I test it on Google Chrome and IE I get the Error: Uncaught ReferenceError: GMaps is not defined

Any ideas why this happening? Thanks in Advance.

Does this not happen in FireFox? Does `gmaps.js` actually load? Is it in the place you've specified? Check the console network tab to find out. — Andy, Oct 16 '14 at 13:08

score 1 · Accepted Answer · answered Oct 16 '14 at 13:11

1

Your html has a typo:

Change

<script type="text/javascript" scr="gmaps.js"></script>

to

<script type="text/javascript" src="gmaps.js"></script>

answered Oct 16 '14 at 13:11

Jon Bates

3,055
2
30
48

Even when you narrowed it down it still took me a couple of minutes to figure out what the difference was. Well spotted. – Andy Oct 16 '14 at 13:14

score 0 · Answer 2 · answered Oct 16 '14 at 13:11

The GMaps object does not exist. You have to use an object of the type google.maps.Map to load a map on your page.

This should be your javascript code:

$(document).ready(function() {
    new google.maps.Map(document.getElementById('map_canvas'), {center: {lat:-12.04333, lng:-77.02833}});
});

A basic example can be found here.

gmaps.js Api doesn't work

2 Answers2