Google Maps::Add an event on KML layer infoWin(balloon)

Adding an event on a KML infoWin is kind of nuisance since Google Maps doesn’t have any tangible event model provided (yet).
Within KML, define a tag with an attribute whence you can trigger a click event.

<Style id="sample_id">
    <IconStyle id="homeIcon">
        <Icon><href>http://www.test.com/images/test_icon.png</href></Icon&gt;
    </IconStyle>
    <BalloonStyle id="MarkerBalloon">
        <bgColor></bgColor>
        <text>
        <![CDATA[
            <b><font color="#CC0000" size="+1"><span name="$[name]">$[name]</span></font></b><br/>Put your text here.<br/>
        ]]>
        </text>
    </BalloonStyle>
</Style>

Google maps server will removes all the tags for security reasons. But there’re a few tags allowed. I named it as “name” but you poke around the find the best suitable name for you.

Google Maps:: So easy, you can do it within a second

Let’s get down on it!

First off, the basic setup:

<script type="text/JavaScript" src="http://maps.google.com/maps/apis/js?sensor=false" />

By doing this you added the reference to Google Maps API in your webpage. Only thing you remember when referencing to Google Maps are setting the sensor parameter.
sensor = true/false – this will tell Google Maps API whether you are using GPS sensor or not. Now, let’s create a canvas.

<div id="map" />

Then, use style to adjust the size of the canvas.

#map {
    height: 400px;
    width: 450px;
}

Then put them into the jQuery document.ready event to let your browser grab the map object.

$(document).ready(function() {
    var tLatlng = new google.maps.LatLng(32.842671, 6.503906);
    var myOptions = {
        center:latlng,
        zoom:10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableAutoPan: false,
        navigationControl: true,
        navigationControlOptions: { style:google.maps.NavigationControlStyle.SMALL },
        mapTypeControl: true,
        mapTypeControlOptions: { style:google.maps.MapTypeControlStyle.DROPDOWN_MENU }
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions );
    var marker= new google.maps.Marker({
        position: new google.maps.LatLng(9.931544168615512,76.27632894178791),
        title: "My Marker",
        clickable: true,
        map: map
    });
    var infoWindow = new google.maps.InfoWindow({
        content: "I am here!"
    });

    // now we attach events 
    google.maps.event.addListener(marker, "mouseover", function(){
        infoWindow.open(map,marker);
    });
    google.maps.event.addListener(marker, "mouseout", function(){
        infoWindow.close(map,marker);
    });
});

That’s about it. It is true that most people think Google Maps is so easy. But is it? Let me give you an example. How would you create a certain line like the one in this example?

http://code.google.com/apis/maps/documentation/javascript/examples/layer-kml.html