Google maps is not displayed on server but on local

Question

Google maps is not displayed on server but on local

I want to show a map with some locations for this I use gmaps JS library https://hpneo.github.io/gmaps /

And on my computer everything works fine, but when I upload it to my server it sends me the following error

Common.js: 48 Uncaught TypeError: Cannot read property 'prototype' of undefined

If I upload my code to the jsfiddle if it works fine. I don't know why on my server it sends me that error. I tried on a free hosting and the map

This is the example of my code http://jsfiddle.net/7ozdg341/1 /

Thanks to who answered, but the problem is not that. Here goes another test I did

<!DOCTYPE html> <!-- archivo completo -->
<html>
<head>
    <title></title>
    <style type="text/css">
        html,
body,
#maps {
    display: block;
    width: 100%;
    height: 100%;
}

#maps {
    background: #58B;
}

    </style>
    <script type="text/javascript" src="assets/plugins/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
    <script type="text/javascript" src="assets/plugins/gmaps/gmaps.js"></script> 
    <script type="text/javascript">

    $(document).ready(function() {

        map = new GMaps({
        div: '#maps',
        lat: 38.542982,
        lng: -90.16917,
        scrollwheel: false,
        zoom: 11
    });

    map.addMarker({
        lat: 38.5778969,
        lng: -89.9878952,
        verticalAlign: 'top',
        title: 'Ceremony Location',  
        infoWindow: {
            content: '<div class="note">Ceremony</div><h4 class="map-title script">Grace Church</h4><div class="address"><span class="region">5151 N Illinois St</span><br><span class="postal-code">Fairview Heights IL</span><br><span class="city-name">62208</span></div>'
        }


    });


    map.addMarker({
        lat: 38.5083615,
        lng: -90.2969051,
        title: 'Reception Location',      
        infoWindow: {
            content: '<div class="note">Reception</div><h4 class="map-title script">Royals Orleans</h4><div class="address"><span class="region">2801 Telegraph Rd</span><br><span class="postal-code">Saint Louis, MO</span><br><span class="city-name">63125</span></div>'
        } 

    });




});
    </script>
</head>
<body>
    <div id="maps" class="map-container">
</body>
</html>

This file works perfect on my computer.

If I upload it to my server server http://lyndaanderic.com/map.html does not work. this error appears:

And in the console shows

 Uncaught TypeError: Cannot read property 'prototype' of undefined 
 common.js:48  
 Google Maps API warning: NoApiKeys
 https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
 util.js:211

As you see, not having the API KEY is just a warning, try to upload it with the API KEY and it doesn't work either.

The weird thing is that the error sends it in a Javascript called common.js that I don't have imported, as if it were dynamically loaded from somewhere.

This is debugging my computer, as you see the file is local

And this is the production server

As javascript is minimized, it's impossible to know who does that.

You could help me.

6

Author: ERIDOM, 2016-07-06

Source

3 answers

score 2 · Answer 1

What you need is to add a key to be able to use the{[3] api]}

When you do this

<script src="http://maps.google.com/maps/api/js"></script>

Should be something like

<script src="http://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXX"></script>

You get the key by creating an app on google and don't forget to give it the permissions.

score 1 · Answer 2

In your html you show in jsfiddle only the div is seen. In the version you have on your server if you have not put it you should put:

<script src="http://maps.google.com/maps/api/js"></script>

Is essential for everything to work well.
And obviously the route to: gmaps.js on your server.

I have done a test by uploading everything to my server and everything works fine for me. I copy code that I have used, I have simply referenced what it asks for. I haven't bothered to put the js in folder but you can do it.

He used the example html file: basic.html and I just added These references by adding those files.

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

If it still doesn't work, it must be a server problem. I hope to help you with this.

score 0 · Answer 3

1.- Enter: https://developers.google.com/maps/web

2.- Select: Google Maps JavaScript API

3.- Scroll down to "Quick start steps" and select:"GET a KEY"

4.- Follow the steps, you will generate a key, this you add so:

<script src="https://maps.googleapis.com/maps/api/js?key=THIS_IS_MY_GENERATED_KEY&libraries=places&sensor=false" type="text/javascript"></script>