How to make multiple rectangles not using hard-coding in google maps api? [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed 3 years ago.

Improve this question

let map, infoWindow;

function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.460074, lng: 126.952568 },
    zoom: 16,
  }
);


    const rectangle = new google.maps.Rectangle({
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map,
        bounds: new google.maps.LatLngBounds(
            new google.maps.LatLng(20.39623, 77.85009),
            new google.maps.LatLng(24.39623, 80.85009)
            )
    });

    infoWindow = new google.maps.InfoWindow();

    const locationButton = document.createElement("button");

    locationButton.textContent = "Pan to Current Location";
    locationButton.classList.add("custom-map-control-button");
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
    locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
        (position) => {
            const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent("Location found.");
            infoWindow.open(map);
            map.setCenter(pos);
        },
        () => {
            handleLocationError(true, infoWindow, map.getCenter());
        }
        );
    } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
    }
    });
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(
    browserHasGeolocation
        ? "Error: The Geolocation service failed."
        : "Error: Your browser doesn't support geolocation."
    );
    infoWindow.open(map);
}

window.initMap = initMap;

I already know to make one rectangle in google maps api, but I don't know how to make multiple rectangles with using loops. I don't want to make all rectangles with using hard-coding like rectangle1, rectangle2. I expect that I have to change variable named bounds, but I don't know how to do it. How can I use loops to make many rectangles?

Where are the many rectangles to be located? Random lat/lng, next to one another or all in same place? — Professor Abronsius
– Professor Abronsius, Commented Sep 4, 2022 at 7:47
You need an array of bounds, then you can use them to make an array of rectangles — Nick
– Nick, Commented Sep 4, 2022 at 7:47

Professor Abronsius · Accepted Answer · 2022-09-04 09:53:27Z

The specific requirements / objectives are a little vague but based upon the comment that they (multiple rectangles) are to be next to one another! then some simple arithmetic using the LatLngBounds for the initial rectangle can be done to determine either the difference in east/west ( to effectively get the width of the rectangle ) or the north/south ( to effectively get the height of the rectangle )

With those differences you can easily plot the new lat/lng values and this draw a new rectangle.

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Google Maps: </title>
        <style>
            #map{
                width:800px;
                height:600px;
                float:none;
                margin:auto;
            }
            .gm-bttn{
                padding:1rem;
                color:gold;
                margin:0.25rem;
                border-radius:1rem;
                border:none;
                background:purple;
                transition:ease-in-out all 500ms;
                cursor:pointer;
            }
            .gm-bttn:hover{
                background:gold;
                color:purple
            }
        </style>
        <script>
            function initMap() {
                let shapes=[];
                let map = new google.maps.Map( document.getElementById("map"), {
                    center: { lat: 37.460074, lng: 126.952568 },
                    zoom: 16,
                });
                
                // your original rectangle bounds
                let bounds=new google.maps.LatLngBounds(
                    new google.maps.LatLng(20.39623, 77.85009),
                    new google.maps.LatLng(24.39623, 80.85009)
                );
                
                // for convenience, convert bounds to json
                let json=bounds.toJSON();
                let delta={
                    long:Math.abs( json.west - json.east ),
                    lat:Math.abs( json.north - json.south )
                };
                
                // create your original rectangle.
                shapes.push(
                    new google.maps.Rectangle({
                        strokeColor: "#FF0000",
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: "#FF0000",
                        fillOpacity: 0.1,
                        map,
                        geodesic:true,
                        bounds:bounds
                    })
                );
                
                // A ring around the globe of rectangles...
                let max=360 / Math.abs( delta.long );
                
                for( let i=1; i < max; i++ ){
                    // modify json based upon delta values for lat/lng
                    json.east -= delta.long,
                    json.west -= delta.long;
                    
                    // and then add a new rectangle
                    shapes.push(
                        new google.maps.Rectangle({
                            strokeColor: "#FF0000",
                            strokeOpacity: 0.8,
                            strokeWeight: 2,
                            fillColor: "#FF0000",
                            fillOpacity: 0.1,
                            map,
                            geodesic:true,
                            bounds:json
                        })
                    );
                }
                

                let infoWindow = new google.maps.InfoWindow();
                
                let clear=document.createElement('button');
                    clear.textContent='Remove rectangles'
                    clear.className='gm-bttn';
                    clear.addEventListener('click',( e )=>shapes.forEach( n=>n.setMap( null ) ) );

                let bttn = document.createElement('button');
                    bttn.textContent='Pan to Current Location';
                    bttn.className='gm-bttn';
                    
                    bttn.addEventListener("click", (e)=>{
                        const errorhandler=()=>{
                            infoWindow.setPosition( map.getCenter() );
                            infoWindow.setContent( navigator.geolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.' );
                            infoWindow.open( map );
                            return false;
                        };
                        const successhandler=( position )=>{
                            const pos = {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude,
                            };
                            infoWindow.setPosition( pos );
                            infoWindow.setContent( "Location found." );
                            infoWindow.open( map );
                            map.setCenter( pos );
                            return true;
                        };
                        const config={
                            enableHighAccuracy:true,
                            timeout:Infinity,
                            maximumAge:60000
                        };
                        if( navigator.geolocation ) {
                            navigator.geolocation.getCurrentPosition( successhandler, errorhandler, config );
                            return true;
                        }
                        return errorhandler();
                    });
                
                map.controls[ google.maps.ControlPosition.TOP_CENTER ].push( bttn );
                map.controls[ google.maps.ControlPosition.TOP_CENTER ].push( clear );
                map.setCenter( bounds.getCenter() );
                map.fitBounds( bounds );
            }
        </script>
        <script async defer src='//maps.googleapis.com/maps/api/js?key=<APIKEY>&callback=initMap'></script>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>

Check out the Proof of concept fiddle to see it in operation.

The same could be done for Latitude values if you wish - or both to completely cover the globe.

Collectives™ on Stack Overflow

How to make multiple rectangles not using hard-coding in google maps api? [closed]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related