CODEWITHSUNDEEP
javascriptphpgoogle-maps
Νίκος Διαμαντόγιαννης
Νίκος Διαμαντόγιαννης

Reputation: 85

Creating Rectangles in google maps

I use php and javascript to present some rectangles in google maps. If i create only one it works perfect. If i use more Chrome slows down so much that i can't load the map.

Here is some code:

<?php
foreach($matrix as $rect)
{
    print"<script>

    var rectangle;
    var map;
    var infoWindow;

    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(". $rect[0][0].", ". $rect[0][1]."),
            zoom: 20
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        var bounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(". $rect[2][0].", ". $rect[2][1]."),
            new google.maps.LatLng(". $rect[1][0].", ". $rect[1][1].")
        );

        rectangle = new google.maps.Rectangle({
            bounds: bounds//,
            //editable: true//,
            //draggable: true
        });

        rectangle.setMap(map);

        // Add an event listener on the rectangle.
        google.maps.event.addListener(rectangle, 'bounds_changed', showNewRect);

        // Define an info window on the map.
        infoWindow = new google.maps.InfoWindow();
    }

    function showNewRect(event) {
        var ne = rectangle.getBounds().getNorthEast();
        var sw = rectangle.getBounds().getSouthWest();

        var contentString = '<b>Rectangle moved.</b><br>' +
            'New north-east corner: ' + ne.lat() + ', ' + ne.lng() + '<br>' +
            'New south-west corner: ' + sw.lat() + ', ' + sw.lng();

        // Set the info window's content and position.
        infoWindow.setContent(contentString);
        infoWindow.setPosition(ne);

        infoWindow.open(map);
    }

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

    </script>"; 
?>

I don't think that my code is wrong. So the question is: Can i present more than one rectangles at the same map, or do i have to use many maps?

Code from here:https://developers.google.com/maps/documentation/javascript/examples/rectangle-event

Thanks in advance!

Upvotes: 1

Views: 2183

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59318

The modified example that demonstrates how to render multiple Rectangle objects

function initialize() {
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.09024, -95.712891),
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

    var minPos = new google.maps.LatLng(49.25, -123.1);
    var maxPos = new google.maps.LatLng(34.052234, -74.005973);    

    
    for(var i = 0; i < 16;i++)
    {
       var lat = getRandomInterval(minPos.lat(),maxPos.lat());
       var lng = getRandomInterval(minPos.lng(),maxPos.lng());
     
       var bounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(lat, lng),
          new google.maps.LatLng(lat + 1.5, lng + 4.0)
       );
       showRect(map,bounds);

    }

}

function showRect(map,bounds){

    // Define the rectangle and set its editable property to true.
    var rectangle = new google.maps.Rectangle({
        bounds: bounds,
        editable: true,
        draggable: true
    });
    rectangle.setMap(map);
    return rectangle;
}

function getRandomInterval(min, max) {
    return Math.random() * (max - min) + min;
}


google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
   height: 100%;
   margin: 0px;
   padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>

Upvotes: 3

Related Questions