CODEWITHSUNDEEP
javascriptgoogle-maps
user10150720
user10150720

Reputation:

Move marker continuously as per user location

I am creating a webpage, in which it first get user location & then update map with user current location by showing a marker to user where he is now. But i want to get user location continuously after 500 milliseconds, But it is showing popup to user again & again to allow his location. But i want that if a user allow previous then popup will not shown to him again. Below is my for that.

<html>
<head>
 <title>Map with live marker</title>
 <meta name="viewport" content="initial-scale=1.0">
</head>
<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
<body>
<div id="map"></div>
<script>
  var lat=0;
  var lng=0;
  var map;
  function getUserlocation(){
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        lat = position.coords.latitude;
        lng = position.coords.longitude; 
        // initMap();
        console.log(lat,lng);          
      });
    } else {
        alert("Geolocation is not supported by this browser.");
    }        
  }

  function initMap() {
    var myLatLng = {lat: lat, lng: lng};
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: lat, lng: lng},
      zoom: 30
    });
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
  }
  setInterval(function(){
    getUserlocation();
  },500);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=Apikey"></script>
</body>
</html>

Can anyone please help me to solve this issue?

Upvotes: 0

Views: 459

Answers (1)

Getter Jetter
Getter Jetter

Reputation: 2081

I was thinking of something like this:

Didn't test it let me know if it works ;-)

<html>
  <head>
    <title>Map with live marker</title>
    <meta name="viewport" content="initial-scale=1.0">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      var map;
      var marker;

      if (navigator.geolocation) {
        // watch for user movement
        navigator.geolocation.watchPosition(function(position) {
          var lat = position.coords.latitude;
          var lng = position.coords.longitude;
          console.log(lat,lng);
          var myLatLng = {lat: lat, lng: lng}
          initMap(myLatLng);
        });
      } else {
        alert("Geolocation is not supported by this browser.");
      }

      function initMap(myLatLng) {

        // create the map if it doesn't exist yet
        if(!map) {
          map = new google.maps.Map(document.getElementById('map'), {
            center: myLatLng,
            zoom: 30
          });
        }
        // optional for centering the map on each user movement:
        else {
          map.setCenter(myLatLng)
        }

        // create the marker if it doesn't exist yet
        if(!marker) {
          marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Hello World!'
          });
        } else {
          // update the markers position
          marker.setPosition(myLatLng);
        }

      }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=Apikey"></script>
  </body>
</html>

EDIT

Just tested it and had the same problem than you, when just drag and dropping the html file into the browser. It seems, that the browser doesn't set the permission for a local file.

Running a local web server like serve solves the problem.

Upvotes: 1

Related Questions