Reputation: 117
I found a great code on web and I am trying to move the marker to another location with a button. I think I need to trigger variable "targetLocation" with a click event but I couldn't find out how. Or should I create variables like targetlocation2 and marker2 ?
location1: 41.118555", 28.2743889
location2: 38.9152733, -111.6676686
html:
<a href="#location1">Address 1</a>
<a href="#location2">Address 2</a>
code:
if ($("#map .google-maps").length) {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var targetLocation = new google.maps.LatLng("41.118555", "28.2743889");
var myOptions = {
center: targetLocation,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13,
scrollwheel: false,
streetViewControl: false,
mapTypeControl: false,
disableDoubleClickZoom: true,
styles: [
{
featureType: "all",
stylers: [
{saturation: -100}
]
}
]
}
var map = new google.maps.Map($("#map .google-maps")[0], myOptions);
directionsDisplay.setMap(map);
var marker = new google.maps.Marker({
position: targetLocation,
map: map,
icon: "marker.png",
visible: true
});
}
Upvotes: 1
Views: 4135
Reputation: 3435
Use setPosition
in your event handler.
$(selector).on('click', function(){
newLocation = new google.maps.LatLng(0,0);
marker.setPosition( newLocation );
});
Upvotes: 3