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

jQuery Google Maps Embed Plugin

How to use it Google maps plugin?

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>

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.