Friday, October 28, 2011

Displaying jquery popup when clicking on an image link in infowindow

You'd already know how to working with infowindow in Google map. In this post, I'll do a little interesting thing. When we click on an image or a link in infowindow, a jquery popup will be displayed. I will guide you step by step.
First, downloading the latest jquery script version. You also have to download the thickbox.js and thickbox.css.
Then, putting it in your project and referring it in your html code.

<link type="text/css" href="/CSS/thickbox.css" rel="stylesheet" />
<script type="text/javascript" src="/SCRIPT/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/SCRIPT/thickbox.js"></script>

Like the previous post, we have to define the location, map option, maker:
        var latlng = new google.maps.LatLng(10.823099, 106.629664);
        var myOptions =
        {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(10.823099, 106.629664),
            map: map
        });

We also have to the define the content and the infowindow:
var contentString =
      '<div style="width: 350px; height: 200px;">' +
      '<ul>' +
        '<li>Company name: ABC</li>' +
        '<li>Address: 130 Truong Chinh, Tan Binh Dist</li>' +
        '<li>City: Ho Chi Minh</li>' +
        '<li>Country: Vietnam</li>' +
      '</ul>' +
      '<p></p>' +
      '<center><a class="thickbox" href="/Images/Lighthouse.jpg"><img src="Images/Lighthouse.jpg" width="120" height="80"></a></center>' +
      '</div>';


        var infoWindow = new google.maps.InfoWindow({ content: contentString });
        google.maps.event.addListener(marker, 'click', function () {

            infoWindow.open(map, marker);
            tb_init('a.thickbox');
        });

There are some differences here: I put a link and refer to the image in the contentString and a little code  tb_init('a.thickbox'); in the click event so that when we click on the image, the jquery popups will be displayed.






Cheers!!!!

Read more:

Working with a simple infowindow in google map
Adding a tooltip to marker
Multitab infowindow in Google Map V3

Add markers to Google Maps

Embedding a google map to the web page


1 comments:

Phạm Anh Tuấn said...

so useful ;))

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Affiliate Network Reviews