googlemap.ninja.js – jQuery Google Maps Embed Plugin




easy-jquery-google-maps-embed-plugin-googlemap-ninja-js

jQuery Google Maps plugin that makes it easier to embed Google maps with custom map markers in the webpage.

How to use it:

1.First include jQuery library and the jQuery googlemap.ninja.js script on the webpage and we’re ready to go.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/googlemap.ninja.js"></script>

2. Create a DIV container to place your Google Maps.

<div class="googleMap"></div>

easy-jquery-google-maps-embed-plugin-googlemap-ninja-js

3. Grab the map.

var $maps = $(".googleMap");

4. Pass the options to the map.

var options = {

 // where to center the map
 address : "Perth" 

 // zoom level
 zoom : 10,

 // background color
 bgColor : "none"
 
}

5. Draw the map with custom markers.

googleMap.draw($map,options,function(map,holder){

 //simply drop a single marker
 googleMap.dropMarker(map,"Cottesloe",function(marker){
 console.log(marker);
 });

 //drop a marker with more options and an info window
 googleMap.dropMarker(map,{
 address : "Perth",
 title : "Here is Perth",
 link : "http://google.com",
 linkText : "Click me",
 content : "Im the content",
 thumb : "http://lorempixel.com/200/100",
 infoWindow : true
 },function(marker){
 console.log(marker);
 });

 //drop several markers at once
 var markers = ["east fremantle","Rottnest Island","fremantle"];
 googleMap.dropMarkers(map,markers,function(markers){
 console.log(markers);
 });

 //initiate directions
 googleMap.directions(map,{
 form : holder,
 start : "Perth"
 });

});

More awesome jQuery plugin visit here.

Leave a Reply

Your email address will not be published. Required fields are marked *