[Demo] (http://cdpn.io/jxysr)
by thulioph
[Demo] (http://cdpn.io/jxysr)
by thulioph
<section id="wrapper"> | |
</section> | |
<article> | |
<p>Procurando no mapa: | |
<location id="status">checando...</span> | |
</p> | |
</article> | |
function success(position) { | |
var s = document.querySelector('#status'); | |
if (s.className == 'success') { | |
return; | |
} | |
s.innerHTML = "Está aqui!"; | |
s.className = 'success'; | |
var mapcanvas = document.createElement('div'); | |
mapcanvas.id = 'mapcanvas'; | |
mapcanvas.style.height = '320px'; | |
mapcanvas.style.width = '320px'; | |
mapcanvas.style.background = '#000000'; | |
document.querySelector('article').appendChild(mapcanvas); | |
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); | |
var myOptions = { | |
zoom: 15, | |
center: latlng, | |
mapTypeControl: false, //enable true for more options | |
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
}; | |
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); | |
var marker = new google.maps.Marker({ | |
position: latlng, | |
map: map, | |
title:"Você está aqui! (no raio de "+position.coords.accuracy+" metros)" | |
}); | |
} | |
function error(msg) { | |
var s = document.querySelector('#status'); | |
s.innerHTML = typeof msg == 'string' ? msg : "failed"; | |
s.className = 'fail'; | |
// console.log(arguments); | |
} | |
if (navigator.geolocation) { | |
navigator.geolocation.getCurrentPosition(success, error); | |
} else { | |
error('not supported'); | |
} |