Menu
I am having three different buttons for drawing shapes. Clicking each button the exclusive drawing option should be enabled and also the other options should become disabled. My code is following.
drawShape.js File
The following is my Javascript code. I am having three separate methods to draw shapes(circle, rectangle, polygon). By the below code, by each click I am getting new drawing controller. Please me to correct it.
google.maps.visualRefresh = true;
var rectangles = [];
var coordinates = [];
var polygons = [];
var map;
function initiateRectangle(){
//Allowing to draw shapes in the Client Side
var drawRectangleTool = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE
]
}
});
//Loading the drawn shape in the Map.
drawRectangleTool.setMap(map);
google.maps.event.addListener(drawRectangleTool,'overlaycomplete',function(event) {
if(event.type == google.maps.drawing.OverlayType.RECTANGLE) {
drawRectangle(event.overlay.getBounds().getNorthEast().lat(),event.overlay.getBounds().getNorthEast().lng(),event.overlay.getBounds().getSouthWest().lat(),event.overlay.getBounds().getSouthWest().lng());
}
});
}
function initiateCircle() {
//Allowing to draw shapes in the Client Side
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.CIRCLE,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE
]
}
});
//Loading the drawn shape in the Map.
drawingManager.setMap(map);
google.maps.event.addListener(drawRectangle,'overlaycomplete',function(event) {
if(event.type == google.maps.drawing.OverlayType.CIRCLE) {
console.log("Circle Working PERFECTLY");
}
});
}
function initiatePolygon() {
//Allowing to draw shapes in the Client Side
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
}
});
//Loading the drawn shape in the Map.
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager,'polygoncomplete',function(polygon) {
drawPolygon(polygon);
});
}
function initialize()
{
//Specifies the google Map properties
map = new google.maps.Map(document.getElementById('map-canvas'), {zoom: 3, center: new google.maps.LatLng(0,0),mapTypeId: google.maps.MapTypeId.ROADMAP});
//
}
//
function displayInfo(conString,customPosition) {
var infoWindow = new google.maps.InfoWindow({
content : conString,
position : customPosition
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
index.xhtml FILE :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title> REGION LOOKUP SYSTEM </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometry&sensor=false"></script>
</h:head>
<h:body>
<div class="container-fluid">
<h3 class="text-center breadcrumb custom-color"> GeoCodeLookUpSystem </h3>
<div class="row-fluid">
<div class="span3 leftpanel custom-color">
<h:commandButton styleClass="buttonStyle" value="Draw Rectangle" onclick="initiateRectangle()"></h:commandButton>
<h:commandButton styleClass="buttonStyle" value="Draw Polygon" onclick="initiatePolygon()"></h:commandButton>
<h:commandButton styleClass="buttonStyle" value="Draw Circle" onclick="initiateCircle()"></h:commandButton>
<h:commandButton styleClass="buttonStyle" value="Delete Shapes"></h:commandButton>
</div>
<div id="map-canvas" class="span9"></div>
</div>
</div>
<h:outputStylesheet library="css" name="bootstrap.css"></h:outputStylesheet>
<h:outputStylesheet library="css" name="customClass.css"></h:outputStylesheet>
<h:outputStylesheet library="css" name="primefacesoverride.css"></h:outputStylesheet>
<h:outputScript library="js" name="drawShape.js"></h:outputScript>
</h:body>
</html>
595
Done it by the following code.
JavaScript Code
var rectangles = [];
var coordinates = [];
var polygons = [];
var map;
var drawingTool = new google.maps.drawing.DrawingManager();
function initiateRectangle(){
//Allowing to draw shapes in the Client Side
if(drawingTool.getMap()) {
drawingTool.setMap(null); // Used to disable the Rectangle tool
}
drawingTool.setOptions({
drawingMode : google.maps.drawing.OverlayType.RECTANGLE,
drawingControl : true,
drawingControlOptions : {
position : google.maps.ControlPosition.TOP_CENTER,
drawingModes : [google.maps.drawing.OverlayType.RECTANGLE]
}
});
//Loading the drawn shape in the Map.
drawingTool.setMap(map);
google.maps.event.addListener(drawingTool,'overlaycomplete',function(event) {
if(event.type == google.maps.drawing.OverlayType.RECTANGLE) {
drawRectangle(event.overlay.getBounds().getNorthEast().lat(),event.overlay.getBounds().getNorthEast().lng(),event.overlay.getBounds().getSouthWest().lat(),event.overlay.getBounds().getSouthWest().lng());
}
});
}
function initiateCircle() {
//Allowing to draw shapes in the Client Side
if(drawingTool.getMap()) {
drawingTool.setMap(null); // Used to disable the Circle tool
}
drawingTool.setOptions({
drawingMode : google.maps.drawing.OverlayType.CIRCLE,
drawingControl : true,
drawingControlOptions : {
position : google.maps.ControlPosition.TOP_CENTER,
drawingModes : [google.maps.drawing.OverlayType.CIRCLE]
}
});
//Loading the drawn shape in the Map.
drawingTool.setMap(map);
google.maps.event.addListener(drawingTool,'overlaycomplete',function(event) {
if(event.type == google.maps.drawing.OverlayType.CIRCLE) {
console.log("CIRCLE TRIGGERED");
}
});
}
function initiatePolygon() {
//Allowing to draw shapes in the Client Side
if(drawingTool.getMap()) {
drawingTool.setMap(null); // Used to disable the Polygon tool
}
drawingTool.setOptions({
drawingMode : google.maps.drawing.OverlayType.POLYGON,
drawingControl : true,
drawingControlOptions : {
position : google.maps.ControlPosition.TOP_CENTER,
drawingModes : [google.maps.drawing.OverlayType.POLYGON]
}
});
//Loading the drawn shape in the Map.
drawingTool.setMap(map);
google.maps.event.addListener(drawingTool,'polygoncomplete',function(polygon) {
drawPolygon(polygon);
});
}
function stopDrawing() {
drawingTool.setMap(null);
}
function initialize()
{
//Specifies the google Map properties
map = new google.maps.Map(document.getElementById('map-canvas'), {zoom: 3, center: new google.maps.LatLng(0,0),mapTypeId: google.maps.MapTypeId.ROADMAP});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With