CODEWITHSUNDEEP
jquerygoogle-maps-api-3google-maps-markers
Blue Cat
Blue Cat

Reputation: 117

Change google maps location onclick

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

Answers (1)

Derek
Derek

Reputation: 3435

Use setPosition in your event handler.

$(selector).on('click', function(){
     newLocation = new google.maps.LatLng(0,0);
     marker.setPosition( newLocation );
});

Upvotes: 3

Related Questions