#AxGmap AxGmap is a simple jQuery plugin that allows you to easily create Google Map, add marker and info window.
##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
Attribute | Type | Description |
---|---|---|
data-latlng | lat, lng | The initial Map center. |
data-map-width | number | Map width (px) |
data-map-height | number | Map Height (px) |
data-zoom | number | The initial Map zoom level. |
data-max-zoom | number | The maximum zoom level . |
data-min-zoom | number | The minimum zoom level. |
data-map-type | HYBRID | ROADMAP | SATELLITE | TERRAIN | The initial Map mapType. Defaults to ROADMAP. |
data-draggable | boolean | If false, prevents the map from being dragged. |
data-scrollwheel | boolean | If false, disables scrollwheel zooming on the map. |
data-map-status | boolean | If true, show map status. |
data-map-type-control | boolean | The initial enabled/disabled state of the Map type control. |
data-overview-map-control | boolean | The enabled/disabled state of the Overview Map control. |
data-pan-control | boolean | The enabled/disabled state of the Pan control. |
data-rotate-control | boolean | The enabled/disabled state of the Rotate control. |
data-scale-control | boolean | The initial enabled/disabled state of the Scale control. |
data-street-view-control | boolean | The initial enabled/disabled state of the Street View Pegman control. |
data-zoom-control | boolean | The enabled/disabled state of the Zoom control. |
###Marker
Attribute | Type | Description |
---|---|---|
data-latlng | lat, lng | Marker position. Defaults to Map center. |
data-title | string | Rollover text. |
data-window-open | boolean | If true, initial opened the info window. |
data-marker-image | URL | The URL of the marker image |
##License
This plugin is available under the MIT license.