CODEWITHSUNDEEP
javascriptgoogle-maps
Mark
Mark

Reputation: 369

Adding an onclick event to google.map marker

I'm stuck trying to figure out a little bit of JS :( I have a google map

var myCenter=new google.maps.LatLng(53, -1.33);

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

var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);

var marker=new google.maps.Marker({
    position:myCenter,
    icon:'images/pin.png',
    url: 'http://www.google.com/',
    animation:google.maps.Animation.DROP
});
marker.setMap(map);
}

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

But I can't seem to hook up the onclick event for the marker url?

I know it has something to do with adding

google.maps.event.addListener(marker, 'click', function() {window.location.href = marker.url;});

But where ever I put it causes the map to not display or the marker to not display.

Upvotes: 31

Views: 122478

Answers (7)

Joaquim
Joaquim

Reputation: 11

<div id="googleMap" style="width:60%;height:300px;" onclick="placeMarker();"></div>
<script>
    function myMap() {
        var mapProp= {
        center:new google.maps.LatLng(15.28983, 73.95482),
        zoom:5,
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
        google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(map, event.latLng);
        });
    }
        function placeMarker(map, location) {
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });         
        var infowindow = new google.maps.InfoWindow({
            content: 'Latitude: ' + location.lat() +
            '<br>Longitude: ' + location.lng()
            
        });
        infowindow.open(map,marker);
        document.getElementById("sitelatitude").value = location.lat();
        document.getElementById("sitelongitude").value = location.lng();
        }
</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API&callback=myMap">
</script>

Upvotes: 1

ashish
ashish

Reputation: 435

In my case, I have multiple markers and I wanted to know which marker was clicked. I found following solution on google forum - https://groups.google.com/g/google-maps-js-api-v3/c/cAJrWZWdD-8?pli=1

By Chris Broadfoot (Google Employee)

You can reference the clicked marker with 'this':

google.maps.event.addListener(marker, 'click', markerListener);

function markerListener() { alert(this.getPosition()); // this.setIcon(... }

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362380

Make sure the marker is defined outside of initialize(). Otherwise, it will be undefined if you attempt to assign the click listener outside of initialize().

Also, you may have SAME-ORIGIN issues if you attempt to load url www.google.com, but it should work fine with a local url.

Updated code

var myCenter=new google.maps.LatLng(53, -1.33);

var marker=new google.maps.Marker({
    position:myCenter,
    url: '/',
    animation:google.maps.Animation.DROP
});

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

var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, 'click', function() {window.location.href = marker.url;});

Working Demo on Bootply

Upvotes: 30

aledujke
aledujke

Reputation: 1135

var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World!',
    url: 'http://www.google.com'
});
google.maps.event.addListener(marker, 'click', function () {
    window.location = marker.url;
});

If you go to this page: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple

and paste the code above into the console you will see that it works.

I think the problem you have is the following, you need to put this line:

google.maps.event.addListener(marker, 'click', function () {
    window.location = marker.url;
});

inside of your initialize function.

Upvotes: 1

Martin Bean
Martin Bean

Reputation: 39389

This is what I’d use:

var latLng = new google.maps.LatLng(53, -1.33);

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: latLng,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    scrollwheel: false,
    zoom: 14
});

var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    icon: 'images/pin.png',
    map: map,
    position: latLng
});

google.maps.event.addDomListener(marker, 'click', function() {
    window.location.href = 'http://www.google.co.uk/';
});

I’m not sure if you can store a url property with a Marker object.

If you need to display multiple markers (i.e. from an API call) then you can use a for loop like this:

for (var i = 0; i < markers.length; i++) {
    (function(marker) {
        var marker = new google.maps.Marker({
            animation: google.maps.Animation.DROP,
            icon: 'images/pin.png',
            map: map,
            position: market.latLng
        });

        google.maps.event.addDomListener(marker, 'click', function() {
            window.location.href = marker.url;
        });
    })(markers[i]);
}

Upvotes: 7

Alex Gill
Alex Gill

Reputation: 2491

Not sure where your content is but you would need to do the following...

var yourContent = new google.maps.InfoWindow({
    content: 'blah blah'
});

google.maps.event.addListener(marker, 'click', function() {
  yourContent.open(map,marker);
});

Upvotes: 0

Smeegs
Smeegs

Reputation: 9224

Here's what I've done in the past. The only difference I see between my code and yours is that I set the marker map in the marker options, and you're setting in with marker.setMap(Map);

var marker = new window.google.maps.Marker({
        position: markerPosition,
        map: map,
        draggable: false,
        zIndex: zIndex,
        icon: getNewIcon(markerType != "archive", isBig)
        , animation: markerAnimation
    });


    window.google.maps.event.addListener(marker, 'click', function () {
        // do stuff
    });

Upvotes: 0

Related Questions