I have a fiddle that works perfectly, now I want to upload it to my server, to I have separated it into 2 files, map.html and map.js .
map.html I put a temporary key that I created (I do not know if that's the problem) I've also tested statically with <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> but without success.
<!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();
});
}
But when I run on my website and local I have the following error:
Uncaught ReferenceError: google is not defined
On the first line used by the maps library:
anchor: new google.maps.Point(0,0),