fancybox on google map marker example
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
This example will show how to use Google Map Marker With Fancybox.
You can see my previous post about Creating Google Map API Zoom the marker
By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)
This example will show how to use Google Map Marker With Fancybox.
You can see my previous post about Creating Google Map API Zoom the marker
This is the requirement for this example :
- Jquery Script - you can get it here
- fancybox script pack - you can get it here
- fancybox css - you can get it here
- html page and of course the Google Map Script
Header on html page
* The header should link with jquery and fancybox script. I will put Google Marker script at header also.<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
<link href="jquery.fancybox.css" type="text/css" rel="StyleSheet" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initializeGMap() {
var Centre = new google.maps.LatLng(3.1357,101.6880);
var mapOptions = { zoom: 10, center: Centre, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var developersNote = new google.maps.LatLng(3.132203,101.672884);
var developersNoteMarker = new google.maps.Marker({position: developersNote,map: map,animation: google.maps.Animation.DROP,title: 'Bangsar'});
google.maps.event.addListener(developersNoteMarker, 'click', function() {
var contentString = '<div style="min-width: 250px; min-height: 150px;">';
contentString += '<table style="font-size:12px; width:250px; height: 150px; border: none !important;">';
contentString += '<tr style="background:none !important;">';
contentString += '<td valign="top" style="border-bottom:none;">';
contentString += '<table><tr style="background:none !important;">';
contentString += '<td style="font-size:16px;border-bottom:none;">';
contentString += '<b>Bangsar</b></td></tr>';
contentString += '<tr style="background:none !important;border-bottom:none;">';
contentString += '<td style="border-bottom:none;">';
contentString += 'Bangsar</td></tr>';
contentString += '<tr style="background:none !important;border-bottom:none;">';
contentString += '<td colspan="2" style="border-bottom:none;">';
contentString += '<b>Phone :</b> 000000000000</td></tr>';
contentString += '</table></div>';
var Name = 'Bangsar';CallInfoWindows(contentString,3.132203,101.672884,Name);});
}
function CallInfoWindows(ContentString,longitude,latitude,Name){
var infoWindowMarker = new google.maps.InfoWindow({
content: ContentString });
var myLatLng = new google.maps.LatLng(longitude,latitude);
var myMarker = new google.maps.Marker({
position: myLatLng,
map: map,
title: Name });
infoWindowMarker.close();
infoWindowMarker.open(map, myMarker);
map.setCenter(myLatLng);
map.setZoom(17);
}
</script>
The Body Content
<div style="display:none">
<div id="myDivID">
<div id="map-canvas" style="width:650px; height:500px;"></div>
</div>
</div>
<a href="#myDivID" onclick="initializeGMap();return false;" id="fancyBoxLink">Click me to show this awesome div</a>
<script type="text/javascript">
$("a#fancyBoxLink").fancybox({
'href' : '#myDivID',
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
</script>
Output Sample
By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)
.bmp)
