Как поставить маркер на карту в javascript
Компьютеры / Программирование / javascript (джаваскрипт)
Тэги: javascript полезные скрипты javascript API Geolocation javascript
Тэги: javascript полезные скрипты javascript API Geolocation javascript
📅3-05-2018 👁385
Код который выводит ваши координаты, и на карте ставит красный маркер, указывающий ваше месторасположение.
Используется javascript Апи от гугл.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Проверка Location</title>
<style type="text/css">
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<div id="loc">Position<br>
<p id="latt"> </p>
<p id="long"> </p>
<p id="err" style="color:red"> </p>
</div>
<div id="map" style=" width:600px; height:600px;">
</div>
<script>
getloc();
function getloc(){
if (navigator.geolocation) {
//alert ("Loc ok!");
navigator.geolocation.getCurrentPosition(positionCallback, onerror);
}else{
alert ("Loc NOT ok");
}
}
function positionCallback(pos){
document.getElementById("latt").innerHTML = "lattitude: " + pos.coords.latitude;
document.getElementById("long").innerHTML = "longitude: " + pos.coords.longitude;
//console.log (latt);
//console.log (long);
showGoogleMap(pos.coords);
}
function onerror(error){
document.getElementById("err").innerHTML = "error: " + error.code + " " + error.message;
}
function showGoogleMap(coords){
var googlecoords = new google.maps.LatLng (coords.latitude,coords.longitude); // создаем объект google.maps.LatLng с полученными координатами широты и долготы
var mapOptions ={// еще один объект с параметрами карты
zoom:17,
center: googlecoords,
mapTypeId: 'roadmap'
};
var mapDiv = document.getElementById("map"); // получаем место html куда всунуть карту с выбранными размерами
var map = new google.maps.Map (mapDiv, mapOptions); // наконец делаем объект карту и выводим на экран
//map.setTilt(45);
addMarker (map, googlecoords, "Your location: "+ coords.latitude + ", " +coords.longitude, "you are here");
}
function addMarker (map, latlong, title, content) {
var markerOptions = {
position: latlong,
map: map,
title: title,
clickable: true
};
var marker = new google.maps.Marker (markerOptions);
var infoWindowOptions = {
content: content,
position: latlong
};
var infoWindow = new google.maps.InfoWindow (infoWindowOptions);
google.maps.event.addListener (marker, "click", function() {
infoWindow.open (map);
});
}
</script>
</body>
</html>Оставить свой ответ:
