I want to add my own button to enable my feature in Google map drawing.
Here is the link for the sample drawing page Google Developers Drawing tools Here you can see 6 options for drawing.
I want to add my option in these 6 option, How can I do that?
I want to add my own button to enable my feature in Google map drawing.
Here is the link for the sample drawing page Google Developers Drawing tools Here you can see 6 options for drawing.
I want to add my option in these 6 option, How can I do that?
Share Improve this question edited May 23, 2014 at 11:45 Linda Lawton - DaImTo 117k38 gold badges220 silver badges496 bronze badges asked May 23, 2014 at 11:40 MangitaMangita 6058 silver badges25 bronze badges 04 Answers
Reset to default 9Start by adding your own button in HTML
<button id="custom-BtnPolygon">Draw</button>
<button id="custom-BtnPolyline">Draw</button>
and call it from your javascript to invoke google drawingManager
$("#custom-BtnPolygon").click( function(){
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
});
$("#custom-BtnPolyline").click( function(){
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYLINE);
});
Initiate polygon drawing from custom button
I don't think you can add a custom control to the Drawing Manager controls as stated in the comments. But with a little bit of styling, you can add your own control next to it and make it look like it's part of the group.
What you need for that is to add your custom control to the same control position than your drawing controls:
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE]
}
map.controls[google.maps.ControlPosition.TOP_CENTER].push(yourCustomControl);
Check the demo. It might not be perfect but you get the idea.
JSFiddle demo
Also described in this example:
home control example
//set the custom control
var homeControlDiv = document.createElement('DIV'),
homeControl = new mymap.HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
//function
HomeControl: function(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderColor ='#365e00';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Home';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '6px';
controlText.style.paddingTop = '1px';
controlText.style.paddingBottom = '1px';
controlText.style.paddingRight = '6px';
controlText.innerHTML = '<b>Home</b>';
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() {
var home = new google.maps.LatLng(50.0019, 10.1419);
map.setCenter(home)
map.setZoom(6)
});
},
best
M
To add custom overlays to your map like in the example from the offcial documentation you just need to create some HTML to create the buttons, taken from this example from the documentation.
<body>
<!-- [START region_toolbar] -->
<!-- Add an input button to initiate the toggle method on the overlay. -->
<div id ="panel">
<input type="button" value="Toggle visibility" onclick="overlay.toggle();"></input>
<input type="button" value="Toggle DOM attachment" onclick="overlay.toggleDOM();"></input>
</div>
<!-- [END region_toolbar] -->
<div id="map-canvas"></div>
</body>
Everything beyond that is just pure CSS, how you design the buttons and the other stuff.
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
What also could help you for displaying the buttons in a better way are custom controls, you can display them on different points in the map and store your buttons there.
PS: The drawingtools from google are nothing more then Google Maps Controls, so the custom controls are the things you're looking for if you want to display your own drawing tools like google does.
Edit to answer the original question:
According to the API Documention the DrawingManager only accepts the given values from google and null. The given values are static ones.
The actually quote:
The DrawingManager's drawing mode, which defines the type of overlay to be added on the map. Accepted values are MARKER, POLYGON, POLYLINE, RECTANGLE, CIRCLE, or null. A drawing mode of null means that the user can interact with the map as normal, and clicks do not draw anything.
So i don't think that there is a possibility to add custom overlays to the given control from Google. But as mentioned in the comments you could create a custom control and style it like the one from Google and display it right next to them.