CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-analytics
Irena
Irena

Reputation: 49

google maps - track click event on info window content

my google map code is:

function initialize(mapdata){
    var LatLng=new google.maps.LatLng(mapdata[0],mapdata[1]);
    var myOptions= {
        zoom:16,
        scaleControl:true,
        streetViewControl:false,
        panControl:true,
        mapTypeControl:true,
        center:new google.maps.LatLng(mapdata[0],mapdata[1]),
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("map"), myOptions);
    document.getElementById("map").style.height="200px";
    document.getElementById("map").style.width="450px";
    var infowindow=new google.maps.InfoWindow();
    var marker=new google.maps.Marker({position:LatLng});
    marker.setMap(map);
    google.maps.event.addListener(marker,'mouseover',function(){
        infowindow.setContent(<div style="text-align:right; font-size:8pt; color:black;">click here<a href="http://www.google.com/"></a> </div>');
        infowindow.open(map,marker);
    });
}

my question is how can I track with analytics after a click event in the info window content?

Thanks in advance, Irena

Upvotes: 0

Views: 2849

Answers (1)

Manuel van Rijn
Manuel van Rijn

Reputation: 10305

have a look at analytics Event Tracking Guide

<a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First Birthday']);">Play</a>

also note that your infowindow.setContent(<div... misses a ' before ('<div

UPDATE

to set the onclick event on the link within the infowindow, you have to use the jquery live event. This because the link isn't present untill we've clicked on the marker to show the infowindow.

so to implement the click event on the <div> within the info window you want to do something like:

google.maps.event.addListener(marker,'mouseover',function(){
        infowindow.setContent('<div style="text-align:right; font-size:8pt; color:black;" id="some_id_here">click here<a href="http://www.google.com/"></a> </div>');
        infowindow.open(map,marker);
});
$("#some_id_here").live('click', function() {
    alert('click');
});

mind that i've given the div the id="some_id_here"

if you have multiple infowindow's that open at the same time, you need to unbind the live event before resetting it. Else it's possible that the live('click') event is binded multiple times. To achieve this you should do this:

$("#some_id_here").die('click').live('click', function() {

Upvotes: 1

Related Questions