Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Update Marker Position Google Maps V3

I am quite a novice with javascript stuff and am currently faking it till i make it lol and now ive come across a small hill that i'm struggling to get over :S.

Currently my script finds the users location and adds a pin to the map while copying LatLon to some form fields.

In addition to just zooming in on the users location i would like them to have the ability to add a custom address which is entered into a text field, geocoded and then updates the current pin on the map.

This all works, although it adds an additional pin to the map rather than updating the current pin.

I am unsure how to pass the value from the address geocoding function back into the original pin / or do i delete the original pin and add a new pin. I'm sure i can reuse some functions as well... i don't think my code is terribly efficient :/

Any way i hope a guru out there can help me out

Cheers Nick

 var geocoder;
 var map;
 var pos;


function initialize() {

geocoder = new google.maps.Geocoder();
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var address = document.getElementById("address").value;
var initialLocation;

var myOptions = {
  zoom: 12,
  center: initialLocation,
  mapTypeId: google.maps.MapTypeId.TERRAIN
}


// Try HTML5 geolocation
    if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);


        var marker = new google.maps.Marker({
          map: map,
          position: pos,
          title: 'Location found using HTML5.',
          draggable: true
        });



        var lat = position.coords.latitude
        var lng = position.coords.longitude
        document.getElementById('geo_latitude').value=lat;
        document.getElementById('geo_longitude').value=lng;

        google.maps.event.addListener(marker, "dragend", function(event) {

            var lat = event.latLng.lat()
            var lng = event.latLng.lng()

            var infowindow = new google.maps.InfoWindow({
                content: '<b><?php _e('Latitude:');?></b>' + lat + '<br><b><?php _e('Longitude:');?></b>' + lng
             });
            infowindow.open(map, marker);

            google.maps.event.addListener(marker, "dragstart", function() {

                infowindow.close();
             });

        document.getElementById('geo_latitude').value=lat;
        document.getElementById('geo_longitude').value=lng;


        });


        map.setCenter(pos);
      }, function() {
        handleNoGeolocation(true);
      });

    } else if (google.gears) {
        browserSupportFlag = true;
        var geo = google.gears.factory.create('beta.geolocation');
        geo.getCurrentPosition(function(position) {
          initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
          map.setCenter(initialLocation);
        }, function() {
          handleNoGeoLocation(browserSupportFlag);
        });
      // Browser doesn't support Geolocation


      } else {
        browserSupportFlag = false;
        handleNoGeolocation(browserSupportFlag);
      }


      function handleNoGeolocation(errorFlag) {
        if (errorFlag == true) {
          alert("Geolocation service failed.");
          initialLocation = newyork;
        } else {
          alert("Your browser doesn't support geolocation. We've placed you in New York.");
          initialLocation = newyork;
        }
        map.setCenter(initialLocation);
      }


 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 }

  //-------------------------------------------------------End initialize

  function findAddress(address) {

var address = document.getElementById("address").value;

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var pos = results[0].geometry.location;

      } else {
        alert("Geocode was not successful for the following reason: " +   status);
      }
    });

}
like image 561
user1095118 Avatar asked Dec 27 '11 03:12

user1095118


People also ask

How do you set a marker position?

First off you must store the marker in an array when you create it so you can have access to it afterwards. Then change the position with marker. setPosition() as solidrevolution mentioned.

How do I move a marker smoothly on Google Maps?

The transition() and moveMarker() are used to move marker smoothly on click on the Google map.

How do you move a marker smoothly?

There is a method makeMarker() you just need to call from onMapReady() method . There is two method rotateMarker() and moveVechile() to rotate and move marker. Hope this will help you.


1 Answers

To 'move' your existing marker, you'll wanna make sure its global and then you can just update its position within the findAddress function with something like:

marker.setPosition(results[0].geometry.location);
like image 160
jenswirf Avatar answered Oct 06 '22 04:10

jenswirf