CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Dida Benmoussa
Dida Benmoussa

Reputation: 1

How to Draw Draggable and Resizable rectangle in google map api v3

I want to draw a custom rectangle which is resizable and draggable with a close button and which is formed with the bounds returned by the query in the database.

Thanks

Upvotes: 0

Views: 5067

Answers (2)

ZzzZZz
ZzzZZz

Reputation: 437

This is a rectangle resizable and dragabble. A little search and some trying would give you what you need.

function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(44.5452, -78.5389),
          zoom: 9,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
          myOptions);

        var bounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(44.490, -78.649),
          new google.maps.LatLng(44.599, -78.443)
        );

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

        rectangle.setMap(map);
      }

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

Hope this helps!

Upvotes: 2

Aravind Asok
Aravind Asok

Reputation: 514

I think the only thing you need to add is "draggable: true" in rectangle options.

So, it should be something like this;

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

This will make the rectangle resizable and draggable. Also in the body of the page create one button. 

<body >
<button onclick="remove()">Close</button>      
</body>

Inside remove function you can write your code to connect to database. You will have to declare the bounds outside initialize() to access it. This link might help you to understand how to connect google maps and MySQL. https://developers.google.com/maps/articles/phpsqlajax_v3

Upvotes: 1

Related Questions