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 |
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.