Easy jQuery Plugin For Manipulating Google Maps - easyGoogleMap

Easy jQuery Plugin For Manipulating Google Maps - easyGoogleMap
File Size: 6.56 KB
Views Total: 5474
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

easyGoogleMap is a jQuery plugin for embedding Google Maps configured by Html5 data attributes into any web page.

How to use it:

1. Include the Google Maps JavaScript API on your web page. You will also need jQuery installed on the page. You can get a Google API key here.

<script src="//maps.googleapis.com/maps/api/js?v=3.6&sensor=false&callback=initialize&key=XXX"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

2. Download the plugin and include the easyGoogleMap.js script after jQuery library.

<script src="js/easyGoogleMap.js"></script>

3. Put HTML onto the page to set the map address and marker.

<div class="quickGoogleMap" id="contactGoogleMap"
     data-address="ADDRESS HERE"
     data-show-marker="1"
     data-marker-lat="52.440983"
     data-market-long="-1.865927"
     data-type="ROADMAP"
     data-zoom="13">
</div>

4. With info window on map pin click:

<div class="quickGoogleMap" id="contactGoogleMap" 
     data-address="ADDRESS HERE"
>
  <h2>My info window title</h2>
  <p>Some info window text</p>
</div>

5. Auto show the info window without pin click:

<div class="quickGoogleMap" id="contactGoogleMap"
     data-address="ADDRESS HERE"
     data-auto-show-infowindow="1">
  <h2>My inf window title</h2>
  <p>Some info window text</p>
</div>

6. All HTML5 data attributes.

  • data-address: The postal data address that the map is to center on
  • data-show-marker: 1 or 0. Set to determine if a map pin is to be displayed or not
  • data-marker-lat & data-marker-long: If you would like the marker to go on a different location than the map address then you can define it here.
  • data-type: The style of map to display. Options: ROADMAP, SATELLITE, HYBRID, TERRAIN
  • data-zoom: How far to zoom in on the map. Set between 1 and 14
  • data-auto-show-infowindow: 1 or 0. If you have set html for an info window popup then you can use this to display the popup right away without the need for the map pin to be clicked.

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