jQuery Plugin To Add Markers & Info Windows On Google Maps - AxGmap

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

How to use it:

1. Include the Google Maps JavaScript API V3 on your webpage.

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

2. Include jQuery library and the jQuery AxGmap plugin on the page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.axgmap.js"></script>

3. Embed Google Maps with custom markers into your document.

<div class="axgmap" data-latlng="48.868974, 2.330663" data-zoom="13">
  <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>

4. Adding the marker and info window.

<div class="axgmap" data-latlng="48.868974, 2.330663" data-zoom="13">
  <div data-latlng="48.860617, 2.337650" data-title="Louvre Museum" data-window-open="true">
    <h4>Louvre Museum</h4>
    <p><img src="1.jpg" width="150"></p>
    <p><a href="http://en.wikipedia.org/wiki/Louvre">[Wikipedia]</a></p>
  </div>
  <div data-latlng="48.865491, 2.321137" data-title="Place de la Concorde">
    <h4>Place de la Concorde</h4>
    <p><img src="2.jpg" width="150"></p>
    <p><a href="http://en.wikipedia.org/wiki/Place_de_la_Concorde">[Wikipedia]</a></p>
  </div>
  <div data-latlng="48.871977, 2.331612" data-title="Palais Garnier">
    <h4>Palais Garnier</h4>
    <p><img src="3.jpg" width="150"></p>
    <p><a href="http://en.wikipedia.org/wiki/Palais_Garnier">[Wikipedia]</a></p>
  </div>
</div>

5. Full data-* options for the Google Maps.

• data-latlng: The initial Map center.
• data-map-width: Map width (px).
• data-map-height: Map Height (px).
• data-zoom: The initial Map zoom level.
• data-max-zoom: The maximum zoom level.
• data-min-zoom: The minimum zoom level.
• data-map-type: The initial Map mapType. (HYBRID | ROADMAP | SATELLITE | TERRAINDefaults to ROADMAP.)
• data-draggable: If false, prevents the map from being dragged.
• data-scrollwheel: If false, disables scrollwheel zooming on the map.
• data-map-status: If true, show map status.
• data-map-type-control : The initial enabled/disabled state of the Map type control.
• data-overview-map-control: The enabled/disabled state of the Overview Map control.
• data-pan-control: The enabled/disabled state of the Pan control.
• data-rotate-control: The enabled/disabled state of the Rotate control.
• data-scale-control: The initial enabled/disabled state of the Scale control.
• data-street-view-control: The initial enabled/disabled state of the Street View Pegman control.
• data-zoom-control: The enabled/disabled state of the Zoom control.

6. Full data-* options for map markers.

• data-latlng: Marker position. Defaults to Map center.
• data-title: Rollover text.
• data-window-open: If true, initial opened the info window.
• data-marker-image: The URL of the marker image.

---

This awesome jQuery plugin is developed by Nouris-Inc. For more Advanced Usages, please check the demo page or visit the official website.