Search code examples
jquerygoogle-mapsmarkerjquery-gmap3

jquery gmap3 update marker on click - google maps v3


I´m just trying out the jquery plugin gmap3 http://gmap3.net/en/

following situation:

i have two addresses, and i want the map to be initialy set to address1 and on click i would like the marker to be updated to address2

var address1 = 'an der alster 42, hamburg';
var address2 = 'schlossstraße, münchen';

$("#mappp").gmap3({
marker:{
  address: address1
},
map:{
  options:{
    mapTypeControl:false,
    zoom: 14
  }
}
});

$('#click').click(function(){
  $("#mappp").gmap3({
marker:{
  address: address2
},
map:{
  options:{
    mapTypeControl:false,
    zoom: 14
  }
}
});
});

Here´s a fiddle http://jsfiddle.net/MDFTN/

I already tryed to destroy the map before updating the marker, but in any way there is nothing happening.

thanks in advance for any hint


Solution

  • Rather than trying to use so forcefully jquery-gmap3 library, you can also do more of yourself - I created an fiddle which does what you want.

    To summarize: we keep track of address latLng values by geocoding them, its the same thing that gmap3 itself does underneath when you are giving marker plain address, so it actually uses google.maps.Geocoder();

    This will work: JS fiddle code