Google Maps Highlight a particular area

Question

How to highlight a particular area in Google Maps? If you go to maps.google.com and search for your location, a dotted line will highlight the area. How to do the same in Google maps API?

Answer 1

You want to draw a line around an area on a map? Use the Polyline class

Update: if you want a nicely styled semi-transparent overlay like the neighbourhood examples on http://zumper.com you should use the Polygon class

Here's a sample of their JS which should give you an idea how they're doing it.

makeHood: function (hood, hoodId) {
            var hoodPoly = HOOD_CACHE[hoodId];
            if (hoodPoly) {
                hoodPoly.setOptions(hoodPolyStandardOptions)
            } else {
                var coordinates = [];
                var markerBounds = hood["bounds"][0]["exterior"];
                for (var i = 0, len = markerBounds.length; i < len; ++i) {
                    coordinates.push(new google.maps.LatLng(markerBounds[i][3], markerBounds[i][0]))
                }
                var options = angular.copy(hoodPolyInitialOptions);
                options.paths = coordinates;
                hoodPoly = new google.maps.Polygon(options);
                hoodPoly.name = hood["name"];
                hoodPoly.id = hoodId;
                hoodPoly.point = new google.maps.LatLng(hood["lat"], hood["lng"]);
                hoodPoly.mouseoverOptions = hoodPolyMouseoverOptions;
                hoodPoly.standardOptions = hoodPolyStandardOptions;
                var box = hood["box"];
                hoodPoly.box = new google.maps.LatLngBounds(new google.maps.LatLng(box[1], box[0]), new google.maps.LatLng(box[3], box[2]));
                hoodPoly.getPosition = angular.bind(hoodPoly, function () {
                    return this.point
                });
                HOOD_CACHE[hoodId] = hoodPoly
            }
            hoodPoly.hood = hood;
            return hoodPoly
        },