Comprehensive Guide to gmap3 API Your Ultimate Resource for Google Maps Integration

Posted on January 26, 2025 by vero

Introduction to gmap3

gmap3 is a robust and versatile jQuery plugin that offers a convenient way to integrate Google Maps into your web applications. It is packed with a variety of APIs that allow you to customize maps, add markers, implement routing, and much more. This guide introduces you to gmap3 and provides comprehensive examples of its powerful APIs.

Basic Map Initialization

 $('#map').gmap3({
  map: {
    options: {
      center: [37.7749, -122.4194],
      zoom: 10
    }
  }
});

Adding Markers

 $('#map').gmap3({
  marker: {
    values: [
      {latLng: [37.7749, -122.4194], data: "San Francisco"}
    ],
    events: {
      click: function(marker, event, context){
        var map = $(this).gmap3('get'),
        infowindow = $(this).gmap3({ get: { name: 'infowindow' } });
        if (infowindow){
          infowindow.open(map, marker);
          infowindow.setContent(context.data);
        } else {
          $(this).gmap3({
            infowindow: {
              anchor: marker, 
              options: { content: context.data }
            }
          });
        }
      }
    }
  }
});

Creating Polylines

 $('#map').gmap3({
  polyline:{
    options:{
      path: [
        [37.7749, -122.4194],
        [34.0522, -118.2437]
      ],
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    }
  }
});

Implementing Directions

 $('#map').gmap3({
  getroute: {
    options: {
      origin: 'San Francisco, CA',
      destination: 'Los Angeles, CA',
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    },
    callback: function (results) {
      if (!results) return;
      $(this).gmap3({
        map: {
          options: {
            zoom: 13
          }
        },
        directionsrenderer: {
          container: $('#directions'),
          directions: results
        }
      });
    }
  }
});

App Example with gmap3 APIs

Below is a simple web application example that integrates all the introduced gmap3 APIs.

 <!DOCTYPE html> <html> <head>
  <title>Gmap3 Example Application</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script src="https://cdn.rawgit.com/jbdemonte/gmap3/master/dist/gmap3.min.js"></script>
  <style>
    #map { height: 400px; width: 100%; }
    #directions { margin-top: 20px; }
  </style>
</head> <body>
  <h1>Gmap3 Example Application</h1>
  <div id="map"></div>
  <div id="directions"></div>

  <script>
    $(document).ready(function(){
      $('#map').gmap3({
        map: {
          options: {
            center: [37.7749, -122.4194],
            zoom: 10
          }
        },
        marker: {
          values: [
            {latLng: [37.7749, -122.4194], data: "San Francisco"}
          ],
          events: {
            click: function(marker, event, context){
              var map = $(this).gmap3('get'),
              infowindow = $(this).gmap3({ get: { name: 'infowindow' } });
              if (infowindow){
                infowindow.open(map, marker);
                infowindow.setContent(context.data);
              } else {
                $(this).gmap3({
                  infowindow: {
                    anchor: marker, 
                    options: { content: context.data }
                  }
                });
              }
            }
          }
        },
        polyline:{
          options:{
            path: [
              [37.7749, -122.4194],
              [34.0522, -118.2437]
            ],
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
          }
        },
        getroute: {
          options: {
            origin: 'San Francisco, CA',
            destination: 'Los Angeles, CA',
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          },
          callback: function (results) {
            if (!results) return;
            $(this).gmap3({
              map: {
                options: {
                  zoom: 13
                }
              },
              directionsrenderer: {
                container: $('#directions'),
                directions: results
              }
            });
          }
        }
      });
    });
  </script>
</body> </html>

By utilizing the powerful gmap3 APIs, you can create interactive and highly customizable maps for your web applications. Happy coding!

Hash: 05dbd41771616681b4efa1aa04a3847a5f8ec6a7e379f19e58344ac685221a67

Leave a Reply Cancel reply