Easy jQuery Google Maps Embed Plugin - googlemap.ninja.js

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

How to use it:

1. Just 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"
  });

});

Change log:

2017-02-01

• made it so you can use an array or an object as a location when building the map

2016-11-18

• prevented default on keyboard controls of map

2016-11-17

• added keyboard controls to the map

2016-11-14

• removed tweaking option as it didnt work

2016-11-08

• added custom zoom controls functionality

2016-11-07

• added custom marker function

---

This awesome jQuery plugin is developed by thepixelninja. For more Advanced Usages, please check the demo page or visit the official website.