Google maps is not shown on the server but on the local

Question

Google maps is not shown on the server but on the local

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

6

I want to show a map with some locations for this I use the library gmaps js link

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

common.js: 48 Uncaught TypeError: Can not read property 'prototype' of undefined

If I upload my code to the jsfiddle if it works well. I do not know why on my server he sent me that error. I tried a free hosting and the map is also seen correctly

This is the example of my code link

Thank you to whoever responded, but the problem is not that. Here is 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 perfectly on my computer.

If I upload it to my server server link It does not work. This error appears:

And in the console it 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 can see, if you do not have the KEY API, it's just a warning, try to upload it with the KEY API and it does not work either.

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

This is the debug of my team, as you can see the file is local

and this is the production server

Since javascript is minimized, it is impossible to know what it does.

They could help me.

javascript google-maps

asked by ERIDOM 06.07.2016 в 06:07

source

3 answers

How to transform base64 image to File? Take coordinates of different div with drag and drop JavaScript

score 2 · Answer 1

What you need is to add a key to use the api

When you do this

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

It should be something like that

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

You can take the key out by creating an app on google and do not forget to give it the permissions.

score 1 · Answer 2

In your html you show in jsfiddle you can only see the div. In the version that you have in your server if you have not put it you should put:

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

It is essential for everything to work well.
And obviously the path to: gmaps.js on your server.

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

I have used the example html file: basic.html and I have simply 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 does not work, it should be a server problem. I hope to help you with this.

score 0 · Answer 3

1.- Go to: link

2.- Select: Google Maps JavaScript API

3.- Go down to "Quick start steps" and select: "GET A KEY"

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

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