Simple Google Maps Embedding Plugin For jQuery - easyMap
| File Size: | 9.55 KB |
|---|---|
| Views Total: | 1604 |
| 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.











