Tiny jQuery Plugin For Embedding Google Maps - toMap
File Size: | 6.44 KB |
---|---|
Views Total: | 1072 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

toMap is a jQuery plugin that makes it easy to embed Google maps with custom map marks, info windows and callbacks into the webpage.
How to use it:
1. Load the necessary jQuery library and Google Maps JS API in the html file.
<!-- google api --> <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> <!-- jquery library --> <script src="/path/to/jquery.min.js"></script>
2. Download and load the jQuery toMap plugin's script after jQuery.
<script src="jquery.tomap.js"></script>
3. Create a DIV element that will be served as the container for the Google Map.
<div id="map"></div>
4. Initialize the plugin to render a Google Map inside the DIV container. By default, New York City is centered at the center of the map after init.
var map = $('#map').reMap();
5. Add a custom map maker to your Google map.
$('#map').reMap('add_marker', '40.730610, -73.935242', '<b>jQuery</b><br/>Script');
6. Set the zoom level.
var map = $('#map').reMap({ defaultZoom: 18 });
7. Set the default location (latitude, longitude) which will be displayed at the center of the Google Map.
var map = $('#map').reMap({ defaultCenter: '40.730610, -73.935242' });
This awesome jQuery plugin is developed by ni1son. For more Advanced Usages, please check the demo page or visit the official website.