How to 'mark' an area from the streets/roads around it and place a number in that area

Trying to 'mark' an area with color and place a number in that area:

I have illustrated it here:

enter image description here

the numbers are static and don't change. The area mark is suppose to change colors. and the area marking suppose to surround the area using the streets/roads around it(not just plain circle drawing)

I will try to explain myself better, Suppose those numbers are areas that I need to visit.. initially they are colored with red. If I visit one area .. then when i finish the visit the marking is turning to blue color.

Hope I make sense. I don't have any code for that .. I tried to search for it but with no luck

I'll try to simplify it, I can manage to drop the colors to not change and make it static also for that I need to draw on the map some 'areas' but from the streets/roads surrounding the area only. by that I mean not to draw a line between two points.

Solution

Here is one solution. Another might be an image overlay but I believe the solution below is more flexible.

You will need: https://cdn.jsdelivr.net/npm/[email protected]/src/maplabel-compiled.min.js

In the above javascript file once you have it, you will also need to change mapPane.appendChild(a) to floatPane.appendChild(a) this is to get the text on top of the polygon. As you will see in the following JSFIDDLE the text is underneath the polygon.

SOLUTION: http://jsfiddle.net/yN29Z/ **UPDATE June 23: ** http://jsfiddle.net/8oevsrmf/

The above javascript is map_label.js in the code below.

My polygon is not the best but you get the idea.

UPDATE: Added color change on clicking the polygon in to code below.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polygon Arrays</title>
    <style>
        html, body, #map-canvas
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="scripts/map_label.js" type="text/javascript"></script>
    <script>
        var map;
        var infoWindow;
        var mypolygon;

        function initialize() {
            var mapOptions = {
                zoom: 18,
                center: new google.maps.LatLng(50.71392, -1.983551),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
 
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            // Define the LatLng coordinates for the polygon.
            var triangleCoords = [
            new google.maps.LatLng(50.71433, -1.98392),
            new google.maps.LatLng(50.71393, -1.98239),
            new google.maps.LatLng(50.71388, -1.98226),
            new google.maps.LatLng(50.71377, -1.98246),
            new google.maps.LatLng(50.71332, -1.98296),
            new google.maps.LatLng(50.71334, -1.98324),
            new google.maps.LatLng(50.71374, -1.9845),
            new google.maps.LatLng(50.71436, -1.98389)];

            // Construct the polygon.
            mypolygon = new google.maps.Polygon({
                paths: triangleCoords,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });

            mypolygon.setMap(map);

            //Define position of label
            var myLatlng = new google.maps.LatLng(50.71392, -1.983551);

            var mapLabel = new MapLabel({
                text: '1',
                position: myLatlng,
                map: map,
                fontSize: 20,
                align: 'left'
            });
            mapLabel.set('position', myLatlng);

            // Add a listener for the click event.  You can expand this to change the color of the polygon
            google.maps.event.addListener(mypolygon, 'click', showArrays);

            infoWindow = new google.maps.InfoWindow();

        }

        /** @this {google.maps.Polygon} */
        function showArrays(event) {

        //Change the color here           
        mypolygon.setOptions({ fillColor: '#0000ff' }); 
            
        // Since this polygon has only one path, we can call getPath()
        // to return the MVCArray of LatLngs.
        var vertices = this.getPath();

        var contentString = '<b>My polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

            // Iterate over the vertices.
            for (var i = 0; i < vertices.getLength(); i++) {
                var xy = vertices.getAt(i);
                contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' + xy.lng();
            }

            // Replace the info window's content and position.
            infoWindow.setContent(contentString);
            infoWindow.setPosition(event.latLng);

            infoWindow.open(map);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
    <div id="map-canvas">
    </div>
</body>
</html>

My sources were as follows.

For the polygon: https :// developers.google.com/maps/documentation/javascript/examples/polygon-arrays

For the label Placing a MapLabel on top of a Polygon in Google Maps V3