CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgeolocation
egvrcn
egvrcn

Reputation: 984

Geolocation Change Marker Position

I use geolocation and I can view map my coordinates. Then, marker put the coordinate. I want to change marker position. My code here:

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='250px';
  mapholder.style.width='100%';

  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!"});

This code get my location coordinates. How can i change marker position?

Upvotes: 1

Views: 1052

Answers (3)

egvrcn
egvrcn

Reputation: 984

I found a solution in this page. My problem is solved with this.

refer this and this site

var map;
var myCenter = new google.maps.LatLng(37, 35);
var markersArray = [];

function clearOverlays() {
    for (var i = 0; i < markersArray.length; i++) {
        markersArray[i].setMap(null);
    }
    markersArray.length = 0;
}

function initialize() {
    var mapProp = {
        center: myCenter,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
    });
}

function placeMarker(location) {
    clearOverlays();
    var marker = new google.maps.Marker({
        position: location,
        map: map,
    });
    markersArray.push(marker);
    var infowindow = new google.maps.InfoWindow({
        content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
    });
    infowindow.open(map, marker);
}

google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 1

Yilmaz
Yilmaz

Reputation: 41

I am sorry Eren about the my previous answer.I misunderstood.I think , this is correct one what you needed.

Display latitude and longitude on marker movement

Refer this site

Upvotes: 1

Yilmaz
Yilmaz

Reputation: 41

moveBus() is getting called before initialize(). Try putting that line at the end of your initialize() function. Also Lat/Lon 0,0 is off the map (it's coordinates, not pixels), so you can't see it when it moves. Try 54,54. If you want the center of the map to move to the new location, use panTo().

Demo: http: //jsfiddle.net/ThinkingStiff/Rsp22/

HTML:

<script src = "http://maps.googleapis.com/maps/api/js?sensor=false" > </script> <div id = "map-canvas"> </div>
CSS:

    #map-canvas {
        height: 400 px;
        width: 500 px;
    }

Script:

    function initialize() {

        var myLatLng = new google.maps.LatLng(50, 50),
            myOptions = {
                zoom: 4,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
            marker = new google.maps.Marker({
                position: myLatLng,
                map: map
            });

        marker.setMap(map);
        moveBus(map, marker);

    }

function moveBus(map, marker) {

    marker.setPosition(new google.maps.LatLng(0, 0));
    map.panTo(new google.maps.LatLng(0, 0));

};

initialize();

Upvotes: 0

Related Questions