On click automatically draw rectangle on the SVG Map

I tried an example of drawing circle in SVG map but i want to draw rectangle and i am unable to do it. My task is to select one of the rectangle of particular shape from left panel and goto map and then click wherever i want. On cursor click rectangle should be created. There are different size of rectangle on left panel of my website like 3x3, 3x6, 6x6 etc.

below is the example

"mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 800" preserveAspectRatio="xMidYMid meet">
"local" transform="scale(4)">
"50" y="50" width="100" height="100" />

Hi sana Khan,

Just try this code,I hope this code is useful for you.

var map, flightPath = new google.maps.Polyline();
function initialize()
{
var mapOptions = {
zoom: 3, center: new google.maps.LatLng(2.42249, 3.82618), mapTypeId: google.maps.MapTypeId.TERRAIN };
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(event)
{
drawLine(event.latLng);
});
}
function drawLine(loc) {
var flightPlanCoordinates = [ new google.maps.LatLng(2.42249, 3.82618), loc ];
flightPath.setMap(null);
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

On click automatically draw rectangle on the SVG Map

below is the example

"mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 800" preserveAspectRatio="xMidYMid meet">
"local" transform="scale(4)">
"50" y="50" width="100" height="100" />

Hi sana Khan,

Just try this code,I hope this code is useful for you.

var map, flightPath = new google.maps.Polyline();
function initialize()
{
var mapOptions = {
zoom: 3, center: new google.maps.LatLng(2.42249, 3.82618), mapTypeId: google.maps.MapTypeId.TERRAIN };
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(event)
{
drawLine(event.latLng);
});
}
function drawLine(loc) {
var flightPlanCoordinates = [ new google.maps.LatLng(2.42249, 3.82618), loc ];
flightPath.setMap(null);
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

On click automatically draw rectangle on the SVG Map

1 Reply

On click automatically draw rectangle on the SVG Map

1 Reply