JQuery / Google Maps: choosing a location with radius control?

Question

JQuery / Google Maps: choosing a location with radius control?

I am looking for a simple convenient way to select a location, getting a lat / long position along with the radius of influence.

I saw a similar thing done when choosing the display areas of ads in Google ads. I wonder if there is a jQuery / Google solution for this? or have you seen something similar that I can implement?

I need only the center (lat / long) and radius.

PS This is for the UK.

+3

map geolocation location

Gary willoughby Jan 31 '11 at 20:43

source share

1 answer

Gary willoughby · Accepted Answer · 2011-02-08T21:05:51+0000

I settled on something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <!-- TITLE -->
        <title>Website Title</title>

        <!-- META -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <!-- JAVASCRIPT -->
        <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>
        <script type="text/javascript" src="jquery-1.4.4.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                var Circle = null;
                var Radius = $("#radius").val();

                var StartPosition = new google.maps.LatLng(54.19335, -3.92695);

                function DrawCircle(Map, Center, Radius) {

                    if (Circle != null) {
                        Circle.setMap(null);
                    }

                    if(Radius > 0) {
                        Radius *= 1609.344;
                        Circle = new google.maps.Circle({
                            center: Center,
                            radius: Radius,
                            strokeColor: "#0000FF",
                            strokeOpacity: 0.35,
                            strokeWeight: 2,
                            fillColor: "#0000FF",
                            fillOpacity: 0.20,
                            map: Map
                        });
                    }
                }

                function SetPosition(Location, Viewport) {
                    Marker.setPosition(Location);
                    if(Viewport){
                        Map.fitBounds(Viewport);
                        Map.setZoom(map.getZoom() + 2);
                    }
                    else {
                        Map.panTo(Location);
                    }
                    Radius = $("#radius").val();
                    DrawCircle(Map, Location, Radius);
                    $("#latitude").val(Location.lat().toFixed(5));
                    $("#longitude").val(Location.lng().toFixed(5));
                }

                var MapOptions = {
                    zoom: 5,
                    center: StartPosition,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false,
                    disableDoubleClickZoom: true,
                    streetViewControl: false
                };

                var MapView = $("#map");
                var Map = new google.maps.Map(MapView.get(0), MapOptions);

                var Marker = new google.maps.Marker({
                    position: StartPosition, 
                    map: Map, 
                    title: "Drag Me",
                    draggable: true
                });

                google.maps.event.addListener(Marker, "dragend", function(event) {
                    SetPosition(Marker.position);
                });

                $("#radius").keyup(function(){
                    google.maps.event.trigger(Marker, "dragend");
                });

                DrawCircle(Map, StartPosition, Radius);
                SetPosition(Marker.position);

            });

        </script>

    </head>

    <body>

        <form>

            Latitude: <input type="text" id="latitude" /> Longitude: <input type="text" id="longitude" />
            Radius: <input type="text" id="radius" value="320" />

            <div id="map" style="width:600px; height:400px; background-color:#000000;">


            </div>

        </form>

    </body>

</html>

JQuery / Google Maps: choosing a location with radius control?

More articles: