Geo Fences

Small test for geo fencing

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

CSS

#map-canvas { 
    height: 400px; 
    width: 500px;
}

JavaScript

var myLatLng = new google.maps.LatLng( 30.353481, -97.798884 );
var mapOptions = {
                    zoom: 12,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                 };
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), mapOptions );
var marker = new google.maps.Marker( {position: myLatLng, map: map, draggable: true} );
    
marker.setMap( map );
    
var circleOptions = {
                      strokeColor: '#FF0000',
                      strokeOpacity: 0.8,
                      strokeWeight: 2,
                      fillColor: '#FF0000',
                      fillOpacity: 0.35,
                      map: map,
                      center: new google.maps.LatLng(30.353481, -97.798884),
                      radius: milesToMeters(5) // is in meters
                    };

// Add the circle to the map.
circle = new google.maps.Circle(circleOptions);

// Attach circle to marker so that when they drag it moves with it.
circle.bindTo('center', marker, 'position');

function milesToMeters(miles)
{
    return miles * 1609.34;
}