ansaurus

Question

Click Event Registered with jQuery Live in Google Map InfoWindow

Answer 1

A:

There are two ways of solving that one with jquery another using old skool javascript onclick.

In the jQuery method binding the event AFTER the info window is shown and the element created seems to solve the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <title></title>
        <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false&amp;amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript">
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
        </script>
        <style type="text/css">
            #gmap {
                height: 450px;
                width: 350px;
            }


        </style>
        <script type="text/javascript">
            var gmap;
            var sampleLatLon = new GLatLng(37.4419, -122.1419);
            var sampleIcon = new GIcon(G_DEFAULT_ICON);

            $(document).ready(function(){

                // Google maps setup
                $(window).unload(function(){
                    GUnload();
                });
                var gmap = new GMap2(document.getElementById("gmap"));
                gmap.setCenter(sampleLatLon, 13);
                gmap.setUIToDefault();

                // Marker and InfoWindow setup
                var marker = new GMarker(sampleLatLon, {
                    icon: sampleIcon
                });

                //marker.bindInfoWindowHtml(infoWindowMarkup);

                GEvent.addListener(marker, "click", function(){
                    var infoWindowMarkup = '<div class="container"><a id="infowindow-1" class="clickeventvialive">click me</a></div>';
                    gmap.openInfoWindowHtml(sampleLatLon, infoWindowMarkup, {
                        "onOpenFn": function(){
                         $(".clickeventvialive").bind("click", function (){alert("hello")});
                        }
                    });

                });



                gmap.addOverlay(marker);

            });
        </script>
    </head>
    <body>
        <div id="gmap">
        </div>
    </body>
</html>

or the old skool method where you can simply add onclick handler to to your link HTML:

var infoWindowMarkup = '<a id="infowindow-1" onclick=alert("Old Skool") class="clickeventvialive">click me</a>';

Michal 2010-10-17 22:59:49

Thanks for the suggestion - I ended up going the intrusive javascript way and in-lining the onclick even in the markup. I loose 50 point SO rep and tons of dev cred but it was late on a Friday and I needed a fix. Later I'll look into the GEvent to redeem myself (if anything, just for myself).

MotoWilliams 2010-10-19 00:18:32

ansaurus

tags:

views:

answers:

Click Event Registered with jQuery Live in Google Map InfoWindow

related questions