CODEWITHSUNDEEP
javascriptjquerygoogle-maps
user3340037
user3340037

Reputation: 731

Uncaught Reference Error: Gmaps.js error?

I'm having trouble figuring out how to use the gmaps plugin. I've followed the example given and even looked at the page source and copied it, yet I still have no progress.

This is my chunk of html with js files included.

<!DOCTYPE html>
<html>
<head>
  <title>testss</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="/javascripts/maps.js"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=true"></script>

  <link href='//fonts.googleapis.com/css?family=Convergence|Bitter|Droid+Sans|Ubuntu+Mono' rel='stylesheet' type='text/css' />

  <script>
$(document).ready(function(){
 var map = new GMaps({
div: '#map', lat: -12, lng: -77
  });
});
  </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

I'm getting these errors:

Uncaught Google Maps API is required. Please register the following JavaScript library http://maps.google.com/maps/api/js?sensor=true. maps.js:22

Uncaught ReferenceError: GMaps is not defined

Not sure why this issue is appearing since I've included the file. Any ideas are much appreciated!

If this helps, I'm using node.js and express on localhost.

Upvotes: 0

Views: 11989

Answers (3)

sankycse
sankycse

Reputation: 140

The error is in the registration url of google maps api. Please use https instead of http. Include this url:

https://maps.google.com/maps/api/js?sensor=true

Upvotes: 1

myagi
myagi

Reputation: 71

That's a dependency error. Include http://maps.google.com/maps/api/js before your call to /javascript/gmaps.js

Upvotes: 1

Kevin Sandow
Kevin Sandow

Reputation: 4033

I'm not sure, who was using the wrong documentation your or I, but this seems to be working quite fine:

<!DOCTYPE html>
<html>
<head>
  <title>testss</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="/javascripts/maps.js"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=true"></script>

  <link href='//fonts.googleapis.com/css?family=Convergence|Bitter|Droid+Sans|Ubuntu+Mono' rel='stylesheet' type='text/css' />

  <script>
    $(document).ready(function(){
      var map = new google.maps.Map(
        document.getElementById('map'), 
        {
          zoom: 15,
          center: new google.maps.LatLng(-12, -77)
        }
      );
    });
  </script>
</head>
<body>
<div id="map" style="height: 20em;"></div>
</body>
</html>

edit: I just realized you were trying to use gmaps.js - but in that case you're missing the gmaps.js file unless that is what your maps.js was for.

You can download the current version at: https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js

Upvotes: 0

Related Questions