Google Maps: Marker inside circle?

Check if a marker is inside a circle with native google Maps API v3 methods

by John Wick

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="note"><span id="title">&raquo;Inside the circle?&laquo;</span><hr /><span class="info">Marker <strong>A</strong>: <span id="a" class="bool"></span></span> &larr;&diams;&rarr; <span class="info">Marker <strong>B</strong>: <span id="b" class="bool"></span></span></div>
<div id="map">test</div>

CSS

body {
    margin: 0; 
    padding: 0
}
html, 
body, 
#map {
    height: 100%; 
    font-family: Arial, sans-serif; 
    font-size: .9em; 
    color: #fff;
}
#note { 
    text-align: center;
    padding: .3em; 10px; 
    background: #009ee0; 
}
.bool {
    font-style: italic;
    color: #313131;
}
.info {
    display: inline-block;
    width: 40%;
    text-align: center;
}
.infowin {
    color: #313131;
}
#title,
.bool{
    font-weight: bold;
}

JavaScript

window.onload = function init() {
    var
        contentCenter = '<span class="infowin">Center Marker (draggable)</span>',
        contentA = '<span class="infowin">Marker A (draggable)</span>',
        contentB = '<span class="infowin">Marker B (draggable)</span>';
    var
        latLngCenter = new google.maps.LatLng(37.081476, -94.510574),
        latLngCMarker = new google.maps.LatLng(37.0814, -94.5105),
        latLngA = new google.maps.LatLng(37.2, -94.1),
        latLngB = new google.maps.LatLng(38, -93),
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: latLngCenter,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        }),
        markerCenter = new google.maps.Marker({
            position: latLngCMarker,
            title: 'Location',
            map: map,
            draggable: true
        }),
        infoCenter = new google.maps.InfoWindow({
            content: contentCenter
        }),
        markerA = new google.maps.Marker({
            position: latLngA,
            title: 'Location',
            map: map,
            draggable: true
        }),
        infoA = new google.maps.InfoWindow({
            content: contentA
        }),
        markerB = new google.maps.Marker({
            position: latLngB,
            title: 'Location',
            map: map,
            draggable: true
        }),
        infoB = new google.maps.InfoWindow({
            content: contentB
        })
        // exemplary setup: 
        // Assumes that your map is signed to the var "map"
        // Also assumes that your marker is named "marker"
        ,
        circle = new google.maps.Circle({
            map: map,
            clickable: false,
            // metres
            radius: 100000,
            fillColor: '#fff',
            fillOpacity: .6,
            strokeColor: '#313131',
            strokeOpacity: .4,
            strokeWeight: .8
        });
   ...