I have a list of locations and I want each of them to be displayed in a map and every location boundaries should be highlighted.

For example, the location “Beaumont, AB T4X”

It should highlight the border of that particular location just like what is being displayed in Google Maps when you search for it.

I have multiple locations in one map so I cant use the embed functionality of Google Maps.

So far, I tried coding this using Geocode. This is my function:

        function geocodeLocation(location) {
            geocoder.geocode({ 'address': location }, function(results, status) {
                if (status === 'OK') {
                    var viewport = results[0].geometry.viewport;
                    var ne = viewport.getNorthEast();
                    var sw = viewport.getSouthWest();
                    var nw = { lat: ne.lat(), lng: sw.lng() };
                    var se = { lat: sw.lat(), lng: ne.lng() };

                    var polygonCoords = [sw, nw, ne, se];
                    var polygon = new google.maps.Polygon({
                        paths: polygonCoords,
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: 0.35
                    });
                    polygon.setMap(map);

                    bounds.extend(ne);
                    bounds.extend(sw);
                    map.fitBounds(bounds);
                } else {
                    console.log('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

The problem with this code is that it will generate square polygons because there are 4 coordinates only.

Is there a way to obtain all the coordinates needed for a specific location? or how can I do this differently?