GMap plugin example

gmap_example.html

<script type="text/javascript">

var generate_maps = function() {
    // By Address
    $("<selector>").each(function() { by_address(this, "<address to show>"); });
    
    // By Lat/Log
    $("div[data-lat]").each(function() { by_latlong(this); });
};
  
var by_latlong = function(obj) {
  ///<summary>Assumes "obj" has data-lat and data.lng defined</summary>
  var $map = $(this); var latlng = { "lat": $map.data("lat"), "lng": $map.data("lng") };
  $map.gmap3({
    center: latlng,
    zoom: 6,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  })
  .marker({
    position: latlng
  }); 
};
  
var by_address = function(obj, addr) {
  var $map = $(obj);
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode(
    { address: addr },
    function(results, status) {
      if (status === 'OK') {
        latlng = results[0].geometry.location;
        console.log('Address "' + addr + '" --> ' + JSON.stringify(latlng));

        $map.gmap3({
          center: latlng,
          zoom: 6,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        })
        .marker({
          position: latlng,
          icon: 'https://maps.google.com/mapfiles/marker_white.png' 
        });
      } 
      else {
        console.log("Geocoding couldn't convert string address to lat/long points");
      }
    }
  );
};
  
</script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gmap3/7.2.0/gmap3.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your Google Maps API key>&callback=generate_maps"></script>