Simple Google Maps Embedding Plugin For jQuery - easyMap

File Size: 9.55 KB
Views Total: 1587
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Google Maps Embedding Plugin For jQuery - easyMap

easyMap is a lightweight jQuery plugin which provides a simple way to embed Google Maps with several customization options into your webpages.

How to use it:

1. Include jQuery library, Google Maps JavaScript API and the jQuery easyMap plugin on your webpages.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js"></script>
<script src="easymap.plugin.js"></script>

2. Embed a default Google Map into your webpage.

$("#container").easymap();

3. Embed a Google Map with custom size and controls into your webpage.

$("#container").easymap({
  size: ['100%', '300px'],
  control: {
    zoom: 4,
    center: [46.60611, 1.87528]
  }
});

4. Embed a Google Map with custom map markers into your webpage.

$("#container").easymap({
  markers: [
    {"latitude":47.614444,"longitude":1.366389,"ville":"BLOIS", "icone": "img/archery.png"},
    {"latitude":46.3333,"longitude":5.25,"ville":"MARBOZ"},
    {"latitude":48.2167,"longitude":-4.16667,"ville":"DINEAULT"},
    {"latitude":47.1667,"longitude":3.33333,"ville":"PREMERY"},
    {"latitude":43.604482,"longitude":1.443962,"ville":"TOULOUSE", "icone": "img/beachvolleyball.png"},
    {"latitude":48.856578,"longitude":2.351828,"ville":"PARIS", "icone": "img/boardercross.png"}
  ]
});

5. All default customization options.

$("#container").easymap({
  size : ['400px', '300px'],
  control: {
    zoom: 8,
    center: [48.856578, 2.351828],
    disableDefault: false,
    zoomControl: true,
    mapTypeControl: true
  },
  markers: [{
    "latitude": null,
    "longitude": null,
    "ville":null,
    "icone": null
 }]
});

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