Google Maps API transfers information between functions
I am having a hard time assigning a marker to my map when placed in a function outside of where the map is initialized.
I have a fixed creator that is placed when the map is loaded, which works fine. I also want the marker to be placed at the location of the user who visited the page. I have placed the second part in a separate function called getUserLocation ().
I tried to call the getMap () function in the getUserLocation () function, but it doesn't work. I guess maybe after? See example below.
// Get user location
function getUserLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
// Users location
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
console.log(pos);
var userLocationMarker = new google.maps.Marker({ map: map, position: pos });
getMap();
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
}
}
// Initialise Google Maps
function getMap() {
var mapOptions = {
center: {lat: 50.7367030, lng: -3.5171710},
zoom: 13
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Home marker
var marker = new google.maps.Marker({
map: map,
position: {lat: 50.7367030, lng: -3.5171710}
});
}
source to share
I answered a similar question about markers just yesterday here .
I just edited it to suit your needs.
$('#button').click(function() {
addmarker('-22.3157017', '-49.0660877');
});
$('#button2').click(function() {
addmarker('-23.5936152', '-46.5856465');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" style="width:80px;height:30px;cursor:pointer;">
Click
</button>
<button id="button2" style="width:80px;height:30px;cursor:pointer;">
Click2
</button>
<div id="map" style="width:555px;height:500px"></div>
<script>
function getMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(50.7367030, -3.5171710),
zoom: 13
});
addmarker(50.7367030, -3.5171710);
}
function addmarker(lat, lon) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map
});
map.panTo(marker.getPosition());
}
function getUserLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
//call function sending coordinates
addmarker(position.coords.latitude, position.coords.longitude)
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDL5dMHBCV7crlostybmkuGBAXjOP3yawQ&callback=getMap"></script>
source to share
Getmap initializes a new instance of the map and can only be called once. To change the position of the marker, you must use a different method.
function getUserLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
// Users location
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
console.log(pos);
var userLocationMarker = new google.maps.Marker({ map: map, position: pos });
var myLatlng = new google.maps.LatLng(pos.lat, pos.lng);
userlocationmarker.setPosition(myLatlng);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
}
}
This new method (setPosition) simply sets the marker position to a new one (in this case, the user's position)
source to share