Мне нужно изменить положение маркера после получения геолокации из браузера. Я предполагаю, что проблема в том, что my_marker не работает getLocation? Все до геолокации работает отлично. Может кто-нибудь помочь, пожалуйста?
<!-- Map -->
<div id = "map" style = "width: 100%; height: 400px;"></div>
<input type = "hidden" id = "location" value = "42.6903741,23.3122929" />
<!-- Script -->
<script type = "text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap&language=en" async defer></script>
<script type = "text/javascript">
function initMap() {
// Init location
var my_location = $("#location").val().split(",");
// Init position
var my_position = new google.maps.LatLng(my_location[0], my_location[1]);
// Init map
var my_map = new google.maps.Map(document.getElementById("map"), {
center: my_position,
zoom: 17
});
// Init marker
var my_marker = new google.maps.Marker({
position: my_position,
map: my_map,
draggable: true,
title: "Choose location..."
});
// Init listener
google.maps.event.addListener(my_marker, "dragend", function(event) {
$("#location").val(event.latLng.lat() + "," + event.latLng.lng());
});
// Init geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getLocation);
}
function getLocation(my_location) {
var my_position = new google.maps.LatLng(my_location.coords.latitude, my_location.coords.longitude);
my_marker.setPosition(my_position);
$("#location").val(my_location.coords.latitude + "," + my_location.coords.longitude);
}
}
</script>





Ты прав. Чтобы переместить маркер в вашей обработке геолокации (когда вы знаете текущее местоположение), вам нужно, чтобы он был доступен в области действия функции обратного вызова геолокации. Переместите функцию геолокации внутрь вашей функции initMap.
function initMap() {
// Init location
var my_location = $("#location").val().split(",");
// Init position
var my_position = new google.maps.LatLng(my_location[0], my_location[1]);
// Init map
var my_map = new google.maps.Map(document.getElementById("map"), {
center: my_position,
zoom: 17
});
// Init marker
var my_marker = new google.maps.Marker({
position: my_position,
map: my_map,
draggable: true,
title: "Choose location..."
});
// Init listener
google.maps.event.addListener(my_marker, "dragend", function(event) {
$("#location").val(event.latLng.lat() + "," + event.latLng.lng());
});
// Init geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getLocation);
}
function getLocation(my_location) {
var my_position = new google.maps.LatLng(my_location.coords.latitude, my_location.coords.longitude);
my_marker.setPosition(my_position);
my_map.setCenter(my_position);
$("#location").val(my_location.coords.latitude + "," + my_location.coords.longitude);
}
} // end of initMap
доказательство концепции скрипки
фрагмент кода:
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
<!-- Map -->
<div id = "map" style = "width: 100%; height: 400px;"></div>
<input id = "location" value = "42.6903741,23.3122929" />
<!-- Script -->
<script type = "text/javascript">
var infoWindow;
function initMap() {
// Init location
var my_location = $("#location").val().split(",");
// Init position
var my_position = new google.maps.LatLng(my_location[0], my_location[1]);
// Init map
var my_map = new google.maps.Map(document.getElementById("map"), {
center: my_position,
zoom: 17
});
// Init marker
my_marker = new google.maps.Marker({
position: my_position,
map: my_map,
draggable: true,
title: "Choose location..."
});
// Init listener
google.maps.event.addListener(my_marker, "dragend", function(event) {
$("#location").val(event.latLng.lat() + "," + event.latLng.lng());
});
infoWindow = new google.maps.InfoWindow;
// Init geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getLocation,
function() {
handleLocationError(true, infoWindow, my_map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, my_map.getCenter());
};
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(my_map);
}
function getLocation(my_location) {
var my_position = new google.maps.LatLng(my_location.coords.latitude, my_location.coords.longitude);
my_marker.setPosition(my_position);
my_map.setCenter(my_position);
$("#location").val(my_location.coords.latitude + "," + my_location.coords.longitude);
}
}
</script>