jquery.mapit.js

A simple jQuery plugin that uses Latitute and Longitude to create a Google Map overlay.

Cick for Demo Download on GitHub

bower install jquery.mapit.js

npm install jquery.mapit.js

usage

Add jquery.mapit.js and jquery to your page.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://sabillon.net/jquery.mapit.js/dist/jquery.mapit.min.js"></script>

Add data-latlng="51.508742,-0.120850" with a Latitude and Longitude value, separated by a comma, to any element.

<a id="your-id" class="btn btn-default" data-latlng='34.056047,-118.2593786' href="#" role="button">Cick here for map</a>

Initialize your mapit in your script file or an inline script tag.

$(document).ready(function(){
 $('#your-id').mapit();
});

options

mapOptions

Name Type Default Description
zoom number 8 The zoom property specifies the zoom level for the map. zoom: 0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution.
mapType string 'roadmap' The mapType property specifies the map type to display. The following map types are supported:
  • 'roadmap': normal, default 2D map
  • 'satellite': photographic map
  • 'hybrid': photographic map + roads and city names
  • 'terrain': map with mountains, rivers, etc.
marker Boolean true Displays a marker on the map.

Example

$('#your-id').mapit({
 mapOptions: {
  zoom: 4,
  mapType: 'hybrid'
 }
});

overlayCSS

Name Type Default Description
height number 400 Height of the overlay, in pixels.
width number 500 Width of the overlay, in pixels.
borderColor string '#000' Color of border of overlay.
borderWidth number 1 Width of border of overlay, in pixels.
borderStyle string 'solid' Style of border of overlay.
zindex number 1000 Property to specify the stack order of the overlay.
backgroundColor string 'rgba(0,0,0,0.7)' Background color of the overlay which can include alpha transparency using rgba.

Example

$('#your-id').mapit({
 overlayCSS: {
  width: 550,
  borderStyle: 'double',
  borderColor: 'red'
 }
});

overlayCloseCSS

Name Type Default Description
width number 25 Width of close button, in pixels.
height number 25 Height of close button, in pixels.
top number -10 Top property of close button.
right number -10 Right property of close button.
zindex number 1001 Property to specify the stack order of the close button.
fontFamily string 'Arial' font-family property specifies the font for the close button.
fontSize number 14 Font size to be used for text in close button.
lineHeight number 1 A number that will be multiplied with the current font size to set the line height.
color string '#fff' Color property for the close button.
backgroundColor string '#000' Background color property for the close button.
borderColor string '#000' Color of border of close button.
borderWidth number 1 Width of border of close button, in pixels.
borderStyle string 'solid' Style of border of close button.
borderRadius string '50%' Property adds rounded borders to close button
boxShadow string '1px 1px 2px 0 rgba(0, 0, 0, 0.4)' box-shadow property attaches shadows to the close button.

Example

$('#your-id').mapit({
 overlayCloseCSS: {
  borderRadius: '0',
  right: 0,
  top: 0,
  color: 'yellow',
  borderColor: '#221c01'
 }
});

and a few more...

Name Type Default Description
overlayAttrs object { id: 'mapit-overlay' } Attributes set on the overlay element. Change the id or add classes.
mapContainerAttrs object { id: 'mapit-wrapper' } Attributes set on the wrapper of the map. Change the id or add classes.
closeButtonCopy string 'x' Copy to display in the close button.
onMapShow function null Callback to be called once the map is displayed.
onMapClose function null Callback to be called once the map is closed.

Example

$('#your-id').mapit({
 overlayAttrs: {
  id: 'my-id',
  class: 'my-class',
  alt: 'my-alt'
 },
 closeButtonCopy: 'close',
 onMapShow: function(){
  console.log('Map is showing');
 },
 onMapClose: function(){
  console.log('Map is closed');
 }
});