Quick start

Obviously, because gmap3 is a jQuery plugin, you need first to load jQuery.

  1. Include gmap3 by using one of:

  2. Load it into your HTML pages:
    <script src="path/to/gmap3.min.js"></script>
  3. The Google Maps API is asynchronously loaded as described on the official page.
    If needed, you can load it explicitly to configure it (see documentation):
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=GB"></script>
  4. Google Maps require a width / height to display maps, prepare your CSS as well, e.g.
    
    gm-map {
        display: block;
        width: 100%;
        height: 300px;
    }
  5. Start to use gmap3, e.g.
    $('#map').gmap3({
      address: "Haltern am See, Weseler Str. 151",
      zoom: 6,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    });