Доброго времени суток.
В сети нашел скрипт который ставит маркеры на карте, и есть сервер с которого нужно взять координаты и поставить эти значения.
Это из сети:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {width:100%; height:600px;}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var element = document.getElementById('map');
var options = {
zoom: 5,
center: {lat: 55.7558, lng: 37.6173},
};
var myMap = new google.maps.Map(element, options);
var markers = [
{
coordinates: {lat: 55.751956, lng: 37.622634},
info: '<h3>Москва</h3><br><img src="https://placehold.it/200x150"><br><p>Описание</p>'
},
{
coordinates: {lat: 59.940208, lng: 30.328092},
info: '<h3>Санкт-Петербург</h3><br> <img src="https://placehold.it/200x150"><br><p>Описание</p>'
},
{
coordinates: {lat: 50.449973, lng: 30.524911},
}
];
for(var i = 0; i < markers.length; i++) {
addMarker(markers[i]);
}
function addMarker(properties) {
var marker = new google.maps.Marker({
position: properties.coordinates,
map: myMap
});
if(properties.image) {
marker.setIcon(properties.image);
}
if(properties.info) {
var InfoWindow = new google.maps.InfoWindow({
content: properties.info
});
marker.addListener('click', function(){
InfoWindow.open(myMap, marker);
});
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
</body>
</html>
Это то что я пробовал:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {width:100%; height:600px;}
</style>
<script type='text/javascript'>
var lat;
var lng;
function start(){
xhttp=new XMLHttpRequest();
xhttp.open('GET','gps.json',true);
xhttp.send();
xhttp.onreadystatechange=function(){
if (xhttp.readyState==4){
//Принятое содержимое json файла должно быть вначале обработано функцией eval
var json=eval( '('+xhttp.responseText+')' );
//Далее мы можем спокойно использовать данные
lat_g=json.Latitude;
lng_g=json.Longitude;
}
}
}
</script>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var element = document.getElementById('map');
var options = {
zoom: 5,
center: {lat: lat_g, lng: lng_g},
};
var myMap = new google.maps.Map(element, options);
var markers = [
{
coordinates: {lat: lat_g, lng: lng_g},
info: '<h3>Москва</h3><br><img src="https://placehold.it/200x150"><br><p>Описание</p>'
},
];
for(var i = 0; i < markers.length; i++) {
addMarker(markers[i]);
}
function addMarker(properties) {
var marker = new google.maps.Marker({
position: properties.coordinates,
map: myMap
});
if(properties.image) {
marker.setIcon(properties.image);
}
if(properties.info) {
var InfoWindow = new google.maps.InfoWindow({
content: properties.info
});
marker.addListener('click', function(){
InfoWindow.open(myMap, marker);
});
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
</body>
</html>