5

Quiero mostrar un mapa con unas ubicaciones para esto utilizo la librería gmaps js https://hpneo.github.io/gmaps/

Y en mi equipo todo funciona bien, pero cuando lo subo a mi servidor me manda el siguiente error

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

Si subo mi código al jsfiddle si funciona bien. No se porque en mi servidor me mande ese error. Probé en un hosting gratuito y también se ve correctamente el mapa

Este es el ejemplo de mi codigo http://jsfiddle.net/7ozdg341/1/


Gracias a quien respondió, pero el problema no es ese. Aquí va otra prueba que hice

<!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>

Este archivo funciona perfecto en mi equipo.

Si lo subo a mi servidor servidor http://lyndaanderic.com/map.html No funciona. aparece este error:

Error

Y en la consola muestra

 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

Como ven, que no tenga el API KEY solo es un warning, lo intente subir con el API KEY y tampoco funciona.

Lo raro es que el error lo manda en un Javascript llamado common.js que yo no tengo importado, como si se cargara dinamicamente de algún lado.

Esto es el debug de mi equipo, como ven el archivo es local

ejemplo local

y este es el servidor de produccion

error servidor

Como el javascript esta minimizado, es imposible saber que hace eso.

Me podrían ayudar.

2
  • Puede que sea por como tienes configuradas las rutas en tu servidor, y no te coja bien el javascript
    – user9099
    el 6 jul. 2016 a las 5:02
  • @ERIDOM he actualizado mi respuesta, espero te ayude el 7 jul. 2016 a las 6:49

3 respuestas 3

1

En tu html que muestras en jsfiddle solo se ve el div. En la versión que tienes en tu servidor si no lo has puesto deberías poner:

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

Es imprescindible para que funcione todo bien.
Y obviamente la ruta a: gmaps.js en tu servidor.

He hecho una prueba subiéndolo todo a mi servidor y me funciona todo bien. Copio código que he usado, simplemente he referenciado lo que pide. No me he molestado en poner los js en carpeta pero lo puedes hacer.

He usado el archivo html de ejemplo: basic.html y simplemente he añadido éstas referencias añadiendo dichos archivos.

  <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>

Si sigue sin funcionarte debe ser un problema de servidor. Espero ayudarte con esto.

3
  • 1
    Yo puedo ver el Mapa correctamente tanto en chrome como en firefox. En el external resource del jsfiddle hace referencia a maps.google.com/maps/api/js?sensor=true&.js
    – jasilva
    el 6 jul. 2016 a las 13:47
  • ese gruntfile de donde lo sacaste?
    – ERIDOM
    el 22 jul. 2016 a las 0:26
  • @ERIDOM tienes que bajarte el pack completo desde Github (github.com/hpneo/gmaps) allí en ejemplos encontrarás ese archivo. el 25 jul. 2016 a las 18:53
1

Lo que te hace falta es agregar una key para poder usar la api

Cuando haces esto

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

Deberia ser algo así

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

la key la sacas creando una app en google y no te olvides de darle los permisos.

1
  • 1
    el no tener key solo me da un warning, ya probe con el key y nada
    – ERIDOM
    el 22 jul. 2016 a las 0:23
0

1.- Entra a: https://developers.google.com/maps/web

2.- Selecciona: Google Maps JavaScript API

3.- Bajas hasta "Quick start steps" y selecciona: "GET A KEY"

4.- Sigue los pasos, se te va a generar un key, este lo agregas asi:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.