🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

AxGmap is a lightweight Google Maps V3 jQuery plugin to create customizable map markers and info windows using Html5 data-* attributes.

Google-Maps

Documentation

#AxGmap AxGmap is a simple jQuery plugin that allows you to easily create Google Map, add marker and info window.

View Demo

##Installation Here is a simple setup:

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="path/jquery.axgmap.js"></script>

##Example Usage

Simple use:

<div class="axgmap" data-latlng="48.873942, 2.334646" data-zoom="12"></div>

Adding the marker and info window:

<div class="axgmap" data-latlng="48.873942, 2.334646" data-zoom="12">   <p data-latlng="48.860617, 2.337650" data-title="Louvre Museum">Louvre Museum</p>   <p data-latlng="48.865491, 2.321137" data-title="Place de la Concorde">Place de la Concorde</p>   <p data-latlng="48.871977, 2.331612" data-title="Palais Garnier">Palais Garnier</p> </div>

Customize the marker image:

<div class="axgmap" data-latlng="48.873942, 2.334646" data-zoom="12">   <p data-marker-type="blue" data-latlng="48.860617, 2.337650" data-title="Louvre Museum">Louvre Museum</p>   <p data-marker-image="http://maps.google.co.jp/mapfiles/ms/icons/restaurant.png" data-latlng="48.865491, 2.321137" data-title="Place de la Concorde">Place de la Concorde</p> </div>

##Configuration

###Map

AttributeTypeDescription
data-latlnglat, lngThe initial Map center.
data-map-widthnumberMap width (px)
data-map-heightnumberMap Height (px)
data-zoomnumberThe initial Map zoom level.
data-max-zoomnumberThe maximum zoom level .
data-min-zoomnumberThe minimum zoom level.
data-map-typeHYBRID | ROADMAP | SATELLITE | TERRAINThe initial Map mapType. Defaults to ROADMAP.
data-draggablebooleanIf false, prevents the map from being dragged.
data-scrollwheelbooleanIf false, disables scrollwheel zooming on the map.
data-map-statusbooleanIf true, show map status.
data-map-type-controlbooleanThe initial enabled/disabled state of the Map type control.
data-overview-map-controlbooleanThe enabled/disabled state of the Overview Map control.
data-pan-controlbooleanThe enabled/disabled state of the Pan control.
data-rotate-controlbooleanThe enabled/disabled state of the Rotate control.
data-scale-controlbooleanThe initial enabled/disabled state of the Scale control.
data-street-view-controlbooleanThe initial enabled/disabled state of the Street View Pegman control.
data-zoom-controlbooleanThe enabled/disabled state of the Zoom control.

###Marker

AttributeTypeDescription
data-latlnglat, lngMarker position. Defaults to Map center.
data-titlestringRollover text.
data-window-openbooleanIf true, initial opened the info window.
data-marker-imageURLThe URL of the marker image

##License

This plugin is available under the MIT license.


You May Also Like