Tiny jQuery Plugin For Embedding Google Maps - toMap

Tiny jQuery Plugin For Embedding Google Maps - toMap
File Size: 6.44 KB
Views Total: 955
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.