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>
<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');
});
'<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:
1 comments:
so useful ;))
Post a Comment