Как я могу обновить Маркер и Карту Google с существующими данными после перезагрузки страницы?
Мне нужен способ обновить и перезагрузить мою Карту Google и Маркер с данными, которые были ранее сохранены. По сути, я хочу, чтобы у пользователя была возможность автоматически заполнять адрес, сохранять в запросе значения lat, long и place_id, а затем, если они снова вернутся на страницу, перезагрузить карту с самым последним поисковым маркером и изображением карты.,
$('#jobLoadingAddressLat').val(place.geometry.location.lat())
$('#jobLoadingAddressLng').val(place.geometry.location.lng())
$("#jobLoadingAddressID").val(place.place_id);
Это то, что я использую для анализа информации о карте. Могу ли я использовать эту информацию для перезагрузки карты и маркера, когда пользователь возвращается на страницу?
Хранение информации в куки будет лучшим вариантом? Что вы, ребята, рекомендуете? Заранее спасибо.
1 ответ
Я использую этот скрипт в HTML
<script>
var geocoder;
var map;
var marker;
var latLng;
function codeAddress() {
// alert("hizo click ....!!!!")
// We obtain the address and assign it to a variable
if (document.getElementById("fPersonal:inputDir").value.length > 0) {
// alert("Direccion mayor a 0");
var combo;
var selectValue;
var indice;
indice = document
.getElementById("fPersonal:cComuna_input").selectedIndex;
//Validate if combo is selected
if (indice == null || indice == 0 || indice == -1) {
selectValue = '';
alert("Seleccione una Comuna para busqueda : ");
} else {
combo = document
.getElementById('fPersonal:cComuna_input');
selectValue = combo.options[combo.selectedIndex].text;
var address = document
.getElementById("fPersonal:inputDir").value
+ ", " + selectValue + "," + " Chile";
//alert(address);
// We create the Geocoder Object
var geocoder = new google.maps.Geocoder();
// We make the request indicating the address and invoke the function
// geocodeResult sending all the result obtained
geocoder.geocode({
'address' : address
}, geocodeResult);
}
}
}
function geocodeResult(results, status) {
if (results.length == 1) {
// Verificamos el estatus
if (status == 'OK') {
// If there are found results, we center and repaint the map
// this to remove any pin before put
var mapOptions = {
zoom : 15,
center : results[0].geometry.location,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document
.getElementById("fPersonal:map"),
mapOptions);
// I get latitude and longitude in text fields
document.getElementById("fPersonal:inputLatitud").value = results[0].geometry.location
.lat();
document.getElementById("fPersonal:inputLongitud").value = results[0].geometry.location
.lng();
// fitBounds will zoom in on the map with the right zoom according to what you are looking for
map.fitBounds(results[0].geometry.viewport);
// We draw a marker with the location of the first result obtained
var markerOptions = {
position : results[0].geometry.location
}
marker = new google.maps.Marker(markerOptions);
marker.setMap(map);
google.maps.event.addListener(map, 'click',
function(event) {
//alert(5);
updateMarker(event.latLng);
});
} else {
// If there are no results or an error has occurred
// we launched a message with the error
//alert("Geocoding no tuvo éxito debido a: " + status);
document.getElementById("fPersonal:inputLatitud").value = '';
document.getElementById("fPersonal:inputLongitud").value = '';
document.getElementById("fPersonal:inputDir").value = '';
}
} else {
// If there are no results or an error has occurred
// we launched a message with the error
// alert ("results is greater than 1:" + results.length);
document.getElementById("fPersonal:inputLatitud").value = '';
document.getElementById("fPersonal:inputLongitud").value = '';
document.getElementById("fPersonal:inputDir").value = '';
}
}
// I update the position on the scoreboard
function updateMarker(location) {
marker.setPosition(location);
updateMarkerPosition(location);
}
// I retrieve latitude, longitude and direction to put it in the form
function updateMarkerPosition(latLng) {
//alert(latLng.lat());
document.getElementById("fPersonal:inputLatitud").value = latLng
.lat();
document.getElementById("fPersonal:inputLongitud").value = latLng
.lng();
}
</script>
я надеюсь может помочь