CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3markers
user3021270
user3021270

Reputation: 78

Drawing Library: Dynamically drawing different markers in Google maps api 3

I am using Google maps api 3 to allow user to dynamically draw markers to the map using the Drawing tools. (ref. here)

I want the user to be able to draw multiple markers having different icons. For e.g, he should be able to draw a school marker, a hospital marker, etc. Each of the icon will be different.

This is what I want the user to draw.

In the docs, it shows that all the markers will have the same icon.

Code:

$(document).ready(function(){

var drawingManager;
var marker = new google.maps.Marker({});
var map;

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(21.0000, 78.0000),
        zoom: 4
    };

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

    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        markerOptions:{
            draggable: true,
        },
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                google.maps.drawing.OverlayType.MARKER
            ]
        }
    });
    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
        var latlng = event.overlay.getPosition()
        console.log(latlng);
    });

}

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

});

Is there a workaround?

Upvotes: 2

Views: 2440

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

Update the markerOptions-property of the DrawingManager-instance with the desired Icon

Basic usage:

drawingManagerInstance.setOptions({markerOptions:
                                       {icon:'path/to/another/marker.png'}});

Demo: http://jsfiddle.net/doktormolle/A2Xhv/

Upvotes: 6

Related Questions