Javascript HTML button click to add marker to map

Question

Im using Google map API V3 with drawing manager to add and save markers to the map. It works fine with the default drawing manager tools. I have the drawingMode set to null so it is inactive until the marker button is clicked - this works with the default set up.

I now have my own custom HTML button that when clicked it activates the drawing manager MARKER tool:

<button id="add-event-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Event</button>

My Javascript is:

document.getElementById('add-event-button').onclick = function()
{
    drawingMode: google.maps.drawing.OverlayType.MARKER;
}

But when it is clicked it does nothing, and returns 0 errors. I replaced

drawingMode: google.maps.drawing.OverlayType.MARKER;

with

alert("button was clicked ");

to see if it is reading the button click and it worked. So what should be added to activate the MARKER tool??

geocodezip · Accepted Answer · 2015-03-04 20:02:52Z

This works for me (and doesn't require jquery):

document.getElementById('add-event-button').onclick = function() {
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
}

Working code snippet:

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    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
      ]
    },
    markerOptions: {
      icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  document.getElementById('add-event-button').onclick = function() {
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
  }
}

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

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<button id="add-event-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Event</button>
<div id="map-canvas"></div>

Steve · Accepted Answer · 2015-03-04 17:00:59Z

1

You probably need to do it via the drawingManager setOptions method, e.g.:

drawingManager.setOptions({
  drawingControlOptions: {
    drawingModes: [google.maps.drawing.OverlayType.MARKER]
  }
});

So in your case:

document.getElementById('add-event-button').onclick = function()
{
        drawingManager.setOptions({
            drawingControlOptions: {
                drawingModes: [google.maps.drawing.OverlayType.MARKER]
            }
        });
}

answered Mar 4, 2015 at 17:00

Steve

3291 silver badge9 bronze badges

Comments

Stephen · Accepted Answer · 2015-03-04 17:16:11Z

0

$("#add-event-button").click( function(){
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
});

answered Mar 4, 2015 at 17:16

Stephen

5372 gold badges7 silver badges20 bronze badges

Collectives™ on Stack Overflow

Javascript HTML button click to add marker to map

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related