Обновление карты Google для новых координат
Здравствуйте!
Подскажите пожалуйста, как правильно написать функцию, которая перегружала бы кару Google в новых координатах с маркером по запросу пользователя? Подтянуть карту у меня получилось, а вот обновить её не получается.
<html>
<head>
<title>Simple Map</title>
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 50%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(57,58),
zoom: 8
});
}
</script>
<script>
function UpdateGoogleMap(latitude, longitude) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(latitude,longitude),
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Это здесь'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap"
async defer></script>
</head>
<body>
<form name="info">
Широта: <input type="text" name="xfirst" align="left" size=20><br><br>
Долгота: <input type="text" name="xend" align="left" size=20><br><br>
<input type="button" value="Построить" name="buttonDraw" align="center" size=15 onclick="UpdateGoogleMap('xfirst.value','xend.value')"><br>
</form>
<div id="map">
</div>
</body>
</html>
|
Vladiiimir,
var map, marker;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(57, 58),
zoom: 8
});
}
function UpdateGoogleMap(latitude, longitude) {
map.setCenter({
lat: latitude,
lng: longitude
});
marker && marker.setMap(null);
marker = new google.maps.Marker({
position: {
lat: latitude,
lng: longitude
},
map: map,
title: "Это здесь"
});
};
onclick="UpdateGoogleMap(+xfirst.value,+xend.value)" |
рони,
Скажите, а в каком части кода должны быть объявлены "var map, marker"? Извините за возможно тупой вопрос, я только начал изучать javascript. Я пытаюсь сделать вот так, но карта непрогружается вообще:
<html>
<head>
<title>Simple Map</title>
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 50%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
}
</style>
<script>
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(51.754207,55.106578),
zoom: 8
});
}
</script>
var map, marker;
<script>
function UpdateGoogleMap(latitude=51.754207, longitude=55.106578) {
map.setCenter(
{lat: latitude,
lng: longitude}
);
marker && marker.setMap(null);
marker=new google.maps.marker({
position:{
lat: latitude,
lng: longitude
},
map: map,
title: 'Это здесь'
});
};
</script>
<!-- -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWH__g2XMzhes7PIk-8v2MbBSZTgMnBSg&callback=UpdateGoogleMap"
async defer></script>
</head>
<body>
<form name="info">
Широта: <input type="text" name="xfirst" align="left" size=20><br><br>
Долгота: <input type="text" name="xend" align="left" size=20><br><br>
<input type="button" value="Построить" name="buttonDraw" align="center" size=15 onclick="UpdateGoogleMap(+xfirst.value,+xend.value)"><br>
</form>
<div id="map">
</div>
</body>
</html>
|
Vladiiimir,
<html>
<head>
<title>Simple Map</title>
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 50%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map, marker;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(51.754207,55.106578),
zoom: 8
});
}
function UpdateGoogleMap(latitude, longitude) {
latitude = (latitude && +latitude)||51.754207;
longitude = (longitude && +longitude)||55.106578;
map.setCenter({
lat: latitude,
lng: longitude
});
marker && marker.setMap(null);
marker = new google.maps.Marker({
position: {
lat: latitude,
lng: longitude
},
map: map,
title: "Это здесь"
});
};
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWH__g2XMzhes7PIk-8v2MbBSZTgMnBSg&callback=initMap"
async defer></script>
</head>
<body>
<form name="info">
Широта: <input type="text" name="xfirst" align="left" size=20 ><br><br>
Долгота: <input type="text" name="xend" align="left" size=20 ><br><br>
<input type="button" value="Построить" name="buttonDraw" align="center" size=15 onclick="UpdateGoogleMap(xfirst.value,xend.value)"><br>
</form>
<div id="map">
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:23. |