1

Tengo un fiddle que funciona perfectamente, ahora quiero subirlo a mi servidor, para ello lo he separado en 2 archivos, map.html y map.js.

map.html pongo una key provisional que he creado (no se si es ese el problema) también he probado estáticamente con <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> pero sin éxito.

<!DOCTYPE html>
<html>
<head>
    <title>CERVEZAS ARTESANAS DE BARCELONA</title>
    <script type="text/javascript" src="map.js" ></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrwvmO8LJ_mYkFsdIkZ6EFXi-dWwfH05M">
</head>
<body>
    <div id="map-canvas" style="width:1100;height:600px" >
    </div>
</body>
</html>

map.js

var map;
var nombres = [
    "CERVE", 
  "DOSS", 
  "TRRES", 
  "QUATTRO", 
  "QUATRE PEDRES"];
var direcciones = [
    "D__UNNO", 
  "D__DOSS", 
  "D__TRRES", 
  "direccion", 
  "cosas y cosas<br>Badalona"];
var marker;
var markers = [];
var coordenadas = [
  "41.3985452,2.1988172",
  "41.4016108,2.1611477",
  "41.3810539,2.1503189",
  "41.3921943,2.1166733",
  "41.4381275,2.232936"
];
var x;
var y;
var contadorMarcas = 0;
var cliente;
var icon = {
    path: "M-10,0a10,10 0 1,0 20,0a10,10 0 1,0 -20,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
}

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
  var myLatlng = new google.maps.LatLng(41.38, 2.18);
  var myOptions = {
    zoom: 12,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

  // añadimos cada punto
  coordenadas.forEach(function(entry) {

    var data = entry.split(",");
    setMarker(data[0], data[1], nombres[contadorMarcas], direcciones[contadorMarcas]);

    contadorMarcas ++;
  });
}

function setMarker(x, y, nombreCliente, tooltipInfo) {
  // cogemos el color que corresponde al cliente
  var pinColor = "AFAFAF";
  var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=%E2%80%A2|" + pinColor,
    new google.maps.Size(34, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));

  // toltip para cada
  var tooltipHTML =
    '<div id="content" ' +
    //'style="width:400px;">' +
    '   <div id="infoWindow' + nombreCliente + '">' +
    '   </div>' +
    '   <h2 id="firstHeading" class="firstHeading">' + nombreCliente + '</h2>' +
    '   <div id="bodyContent">' +
    '       <p><b>' + tooltipInfo + '</b></p>' +
    '   </div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({});
  var pos = new google.maps.LatLng(x, y);

  // ponemos el marker en el mapa
  var marker = new google.maps.Marker({
    position: pos,
    map: map,
    icon: pinImage,
    title: nombreCliente,
    icon: icon
  });

  // le incrustamos el tooltip
  bindInfoWindow(marker, map, infowindow, tooltipHTML);

  // y lo ponemos en el array general
  markers.push(marker);

}

// permite que cada marcador muestre su propio tooltip 
function bindInfoWindow(marker, map, infowindow, strDescription) {
  google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.setContent(strDescription);
    infowindow.open(map, marker);
  });
  google.maps.event.addListener(marker, 'mouseout', function() {
    infowindow.close();
  });
  google.maps.event.addListener(infowindow, 'domready', function() {
    $(".gm-style-iw").next("div").hide();
  });
}

Pero cuando lo ejecuto en mi web y local tengo el siguiente error:

Uncaught ReferenceError: google is not defined

En la primera linea que se utiliza la libreria de maps:

anchor: new google.maps.Point(0,0),

2 respuestas 2

2

Mira, lo que veo es que te falta cerrar la etiqueta script de la url, en el archivo de map.html. Ya lo probé y me funciona correctamente.

Ademas debes cambiar el orden de ejecución de los scripts.

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrwvmO8LJ_mYkFsdIkZ6EFXi-dWwfH05M"></script>
<script type="text/javascript" src="map.js" ></script>
4
  • he arreglado eso, pero me sigue dando el mismo error, puedes postear el codigo corregido? soy un parras con el html.... XD gracias! el 25 jul. 2016 a las 18:23
  • Lo había olvidado, tambien tienes que color primero el script de la url y después el de map.js. <script src="maps.googleapis.com/maps/api/…> <script type="text/javascript" src="map.js" ></script>
    – Gibrán
    el 25 jul. 2016 a las 18:26
  • corrige la respuesta para completarla :) el 25 jul. 2016 a las 18:28
  • Listo ;), me había olvidado.
    – Gibrán
    el 25 jul. 2016 a las 18:30
2

Cambia el orden de los scripts (cargar primero google maps) y cierra su etiqueta script:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrwvmO8LJ_mYkFsdIkZ6EFXi-dWwfH05M"></script>
<script type="text/javascript" src="map.js" ></script>
4
  • parece que funciona, porque importa el orden de los scripts? el 25 jul. 2016 a las 18:25
  • Porque estás llamando elementos a partir de map.js que no existen aún en el DOM, de ahí la importancia del orden, digamos que es una especie de dependencia.
    – Shaz
    el 25 jul. 2016 a las 18:26
  • ostia claro!!! que bueno.... cosa más aprendida... en java no tenemos estos problemas :D el 25 jul. 2016 a las 18:29
  • tienes mi +1 pero voy a aceptar la respuesta de gibrán que ha sido el primero y tiene mucha menos rep... espero no te importe :) el 25 jul. 2016 a las 18:31

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.