CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Stephen
Stephen

Reputation: 537

Javascript HTML button click to add marker to map

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??

Upvotes: 1

Views: 3267

Answers (3)

geocodezip
geocodezip

Reputation: 161404

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>

Upvotes: 2

Stephen
Stephen

Reputation: 537

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

Upvotes: 0

Steve
Steve

Reputation: 329

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]
            }
        });
}

Upvotes: 1

Related Questions