Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Update Marker position on google map

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 903
    Comment on it

    By using this function when we will click on Marker, its location will be shown on tha map. Here we have a function , first we will create "infowindow" object outside the function (global scope), then we will make infowindow objec constructor , within updateMarker function. Watch below-

     var geocoder = new google.maps.Geocoder(), infowindow;
         function geocodePosition(pos) {
       geocoder.geocode({
        latLng: pos
      }, function(responses) {
        if (responses && responses.length > 0) {
          updateMarkerAddress(responses[0].formatted_address);
        } else {
          updateMarkerAddress('Cannot determine address at this location.');
        }
      });
    }
    
    function updateMarkerStatus(str) {
      document.getElementById('markerStatus').innerHTML = str;
    }
    
    function updateMarkerPosition(latLng) {
      document.getElementById('info').innerHTML = [
        latLng.lat(),
        latLng.lng()
      ].join(', ');
    }
    
    
    function updateMarkerAddress(str) {
      infowindow = new google.maps.InfoWindow({
          content:  str
      });
      document.getElementById('address').innerHTML = str;
    }
    
    function initialize() {
      var latLng = new google.maps.LatLng(-34.397, 150.644);
      var map = new google.maps.Map(document.getElementById('mapCanvas'), {
        zoom: 8,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var marker = new google.maps.Marker({
        position: latLng,
        title: 'Point A',
        map: map,
        draggable: true
      });
      var geocoder = new google.maps.Geocoder(), infowindow;
         function geocodePosition(pos) {
       geocoder.geocode({
        latLng: pos
      }, function(responses) {
        if (responses && responses.length > 0) {
          updateMarkerAddress(responses[0].formatted_address);
        } else {
          updateMarkerAddress('Cannot determine address at this location.');
        }
      });
    }
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
    
      // Update current position info.
      updateMarkerPosition(latLng);
      geocodePosition(latLng);
    
      // Add dragging event listeners.
      google.maps.event.addListener(marker, 'dragstart', function() {
        updateMarkerAddress('Dragging...');
      });
    
      google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
      });
    
      google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
      });
    }
    
     getLocation();
      var x=document.getElementById("demo");
      function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition,showError);
        } else{
          x.innerHTML="Geolocation is not supported by this browser.";
        }
      }
      function showPosition(position) {
        lat=position.coords.latitude;
        lon=position.coords.longitude;
        latlon=new google.maps.LatLng(lat, lon)
        mapholder=document.getElementById('mapholder')
        mapholder.style.height='500px';
        mapholder.style.width='1000px';
        var myOptions={
          center:latlon,
          zoom:14,
          mapTypeId:google.maps.MapTypeId.ROADMAP,
          mapTypeControl:false,
          navigationControlOptions:{
            style:google.maps.NavigationControlStyle.SMALL
          }
        };
        var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
        var marker=new google.maps.Marker(
          {position:latlon,map:map,title:"You are here!"}
        );
      }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: