CUSTOM GMAP3 BUILD - Calculate distance from current location. Two Functions: 1. Loads map with markers for current location and a specified destination. 2. Re-loads the same map, but this time checks for the distance between the current location and the destination and checks to see if the user is within a given range. If true - returns an aler…

bluehollercreative-gmap-functions.js

//  Author: Stephen King
//  Contact: stephen.curtis.k@gmail.com
//  Credits: http://www.gmap3.net
//  Created using Google maps and the "gmap3" framework.

/* =========================================================================================
	AUTHOR NOTES
   =========================================================================================
//LOAD initMap(); function at the end of your HTML document before the closing "body" tag.
LOAD destination(); function through a button's onclick="distance();"
//
initMap(); - loads the initial map with current location marker and custom marker "https://dl.dropboxusercontent.com/u/18722808/star-icon.png" showing on the map. The map is passed into the HTML document through the div with an id="geo"
//
destination(); - loads a new map with the current location and destination again AND calculates the distance between your current position and the destination. If your within a given range (determined by line 132) then it returns an alert "You've found the secret portal!!!". Otherwise, if you're not within the given range the function will alert "You're not close enough to find the secret portal." 
//
You'll have to update the custom markers I used for the destination location: "https://dl.dropboxusercontent.com/u/18722808/star-icon.png"
Otherwise the destination location will not show up with a marker
//
NOTE
Be sure to give your div#geo a width & height in your CSS stylesheet or the map won't display.
========================================================================================== */ 


//  ============================================================
//  ============================================================
//	MAP FUNCTIONS
//	============================================================
//	============================================================

//	============================================================
//	Initial Map
//	============================================================
function initMap(){

	$('#geo').gmap3({
	  getgeoloc:{
	    callback : function(latLng){
	      if (latLng){
	        $(this).gmap3({
	        	marker:{
	          		values:[
		              {latLng:latLng, options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}},
		              {latLng:[35.948242,-84.167814], options:{icon: "https://dl.dropboxusercontent.com/u/18722808/star-icon.png"}},
		            ],
		            options:{
		              draggable: false
		            },
		            events:{
		              mouseover: 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}
		                    }
		                  });
		                }
		              },
		              mouseout: function(){
		                var infowindow = $(this).gmap3({get:{name:"infowindow"}});
		                if (infowindow){
		                  infowindow.close();
		                }
		              }
		            }
		        },
	          	map:{
	          		options:{
	          			zoom:18,
	          			mapTypeId: google.maps.MapTypeId.SATELLITE
	          		}
	          	}
	        });
	      } else {
	        $('#test1-result').html('not localised !');
	      }
	    }
	  }
	});

}


//	============================================================
//	Distance Checker Map
//	============================================================

function distance(){
    var origins = [];
    
    $("#geo").gmap3({

	getgeoloc:{
		callback : function(latLng){
			console.log(latLng);
			if (latLng){
				origins.push(latLng);
				$(this).gmap3({
					marker:{ 
						values:[
							{latLng:latLng, data:"Current Location", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}},
							{latLng:[35.948242,-84.167814], data:"Hidden Portal", options:{icon: "https://dl.dropboxusercontent.com/u/18722808/star-icon.png"}},
						],
				  	},
					map:{
					options:{
						center:latLng,
						zoom: 18
					}
					}
				});
			}
		}
	},

    getdistance:{
        options:{ 
			origins: origins, 
			destinations:["35.948164,-84.167554"],
			travelMode: google.maps.TravelMode.WALKING
        },

        callback: function(results, status){
          var html = "";
          var caldist = "";
          if (results){
            for (var i = 0; i < results.rows.length; i++){
              var elements = results.rows[i].elements;
              for(var j=0; j<elements.length; j++){
                switch(elements[j].status){
                  case "OK":
                    html += elements[j].distance.text + " (" + elements[j].duration.text + ")<br />";
                    caldist += elements[j].distance.text;
                    break;
                  case "NOT_FOUND":
                    html += "The origin and/or destination of this pairing could not be geocoded<br />";
                    break;
                  case "ZERO_RESULTS":
                    html += "No route could be found between the origin and destination.<br />";
                    break;
                }
              }
            } 
          } else {
            html = "error"; 
          }
          $("#results").html( html );

          var caldistParsed = parseFloat(caldist);
          caldistParsed = caldistParsed * 1000;
          if (caldistParsed <= 10){
            alert("You've found the secret portal!!!");
          } else {
            alert("You're not close enough to find the secret portal.  "  + "You must be within 10 meters to uncover the portal.  You are currently " + caldistParsed + " meters from the portal");
          }
        }
      }
    });

}