Home/ Questions/Q 3876810
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T22:25:31+00:00

I’m looking for a simple user friendly way of selecting a location by getting

  • 0

I’m looking for a simple user friendly way of selecting a location by getting the lat/long position along with a radius of influence.

I’ve seen a similar thing done while selecting ad display areas in google ads. I wonder is there a jQuery/Google solution to this? or have you seen something similar i can implement?

I just need a center (lat/long) and radius.

P.S. This is for the UK.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0