Embed Custom Google Maps Made Easy With jQuery - Simple Maps

Simple Maps is a fast, lightweight and performance-focused jQuery plugin that makes it easier to insert customizable Google Maps into your webpage.

Features:

• Load and render the Google maps on demand.
• Allows to display the Google Maps in an overlay.
• Custom info windows and map markers.

Basic usage:

1. Load the jQuery Simple Maps plugin's style sheet in the header of your html page.

<link rel="stylesheet" href="jquery-sm-style.css">

2. Create a placeholder element for the Google Map and specify the location to show using the data-sm_address attribute.

<div id="basic" data-sm_address="New York, US">

3. Load jQuery library the jQuery Simple Maps plugin's style sheet at the bottom of your html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.simpleMap.js"></script>

4. Call the function on the DIV container to render a Google Map on page load.

$('#basic').simpleMap({
  autoLoad: true
});

5. Invoke the plugin to a clickable element to render the Google map manually.

<button class="trigger" data-sm_address="Los Angeles, CA">Los Angeles</button>

$('.trigger').simpleMap({
  mapElementId: "basic"
});

6. Display the Google Map in a fullscreen overlay.

<button class="trigger" data-sm_address="Los Angeles, CA">Los Angeles</button>

$('.trigger').simpleMap({
  useOverlay: true
});

7. Customize the Google map.

$('.trigger').simpleMap({
  mapSetup: {

    //bool: enable disable scroll zooming on mousewheel
    scrollwheel: true, 

    //bool: enable street view controls UI
    streetViewControl: false,

    //bool: enable the pan controls UI
    panControl: false, 

    //int: the map zoom level
    zoom: 10, 
    zoomControlOptions: {
      //position: google.maps.ControlPosition.RIGHT_TOP
    }
  }
});

8. Add your own info windows and map markers:

$('.trigger').simpleMap({

  markerConfig : {

    //string: the title of the marker as a string
    title: null, 

    //string: the URL of the marker icon as a string
    icon: null 

  },

  infoWindowConfig: {

    //bool: auto show the map info window
    autoShow: false, 

    //int: set the info window max width
    maxWidth: 240, 

    //string or $(element).html(): The HTML to display in the info window
    html: null

  },
  
});

9. More default options.

$('.trigger').simpleMap({

  //bool:set to true if maps api loaded by other means
  isApiLoaded: false, 

  //string: your Google API key
  googleApiKey: "", 

  //gool: load the map (invoked on map container element)
  autoLoad: false, 

  //bool: use the built in overlay
  useOverlay: false, 

  //string: the close overlay text
  overlayCloseText: "Close", 

  //int: overlay transition speed
  transSpeed: 220, 

  //string: the default map element id to draw to (not needed if useOverlay or autoLoad set to true)
  mapElementId: "sm_panel", 

  //string: The default address
  theAddress: "Toledo, Ohio"

});

---

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