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

This is the requirement for this example :

  1. Jquery Script - you can get it here
  2. fancybox script pack - you can get it here
  3. fancybox css - you can get it here
  4. 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
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 =)

Popular posts from this blog

Example to disable save as certain file type in SSRS Report Viewer

Phone book application example - Java

Modal Popup Message Box ASP.NEt C# Example