Problema con geolocalizacion

[agoya]

Buenas a todos,
estoy realizando un trabajo en el cual necesito usar la geolocalizacion. El Problema es que al mostrar el mapa, no puedo apreciar nada, ya que aparecen como varias capas. El código javascript que tengo es el siguiente:

window.onload=init();

function drawMap(latitude, longitude){

var coordenadas = new google.maps.LatLng(latitude, longitude);
var mapOptions={
zoom: 15,
center: coordenadas,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapa = new google.maps.Map(document.getElementById("map_canva s"), mapOptions);
var marcador = new google.maps.Marker({
position: new google.maps.LatLng(latitude,longitude),
title: "Estas aquí",
animation: google.maps.Animation.DROP
});

marcador.setMap(mapa);
}

function init(){
if(navigator.geolocation){
geo = navigator.geolocation;
geo.getCurrentPosition(showLocation, failure);
}else{
console.log('FAIL');
}
}

function showLocation(position){
var lat = position.coords.latitude;
var long = position.coords.longitude;
drawMap(lat, long);
}

function failure(error){
alert(error);
}

En el documento html tengo bien referenciado el javascript.