How i add my own image or drawing option on google map drawing

Question

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?

score 9 · Answer 1 · edited May 23 '17 at 12:22

Start 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

score 7 · Accepted Answer · answered May 23 '14 at 13:06

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

KhorneHoly · Answer 3 · 2014-05-23T13:01:52.507

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.

The drawing tools controls are nothing more than custom controls. That's right. But can you add your custom control to this group of controls, which is the OP question? — MrUpsidown, May 23 '14 at 12:35
It should be possible with the `drawingManager.setDrawingMode(YOURCUSTOMOVERLAY);` option provided from the API, but i'm not sure, just quick research — KhorneHoly, May 23 '14 at 12:50
I just looked up the [API Documentation](https://developers.google.com/maps/documentation/javascript/reference#DrawingManagerOptions) and there's the following `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'd say that there is no possibility to add your custom overlay to the given from Google — KhorneHoly, May 23 '14 at 12:54
But how we add our own custom controls to this group of controls? @MrUpsiddown — Mangita, May 23 '14 at 12:55
Ya i am also want to add my own drawing of mode in this drawing of groups. @KhorneHoly — Mangita, May 23 '14 at 12:56
I think you can't. That's the point. In any case, you can 'mimic' that by adding a custom control to the same Control Position with a little bit of styling. I will add an example. — MrUpsidown, May 23 '14 at 12:56
I updated my answer according to the comments, i'm with @MrUpsidown — KhorneHoly, May 23 '14 at 13:02

score 0 · Answer 4 · answered May 23 '14 at 12:23

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

How i add my own image or drawing option on google map drawing

4 Answers4