CODEWITHSUNDEEP
javascriptgoogle-maps
Stpn
Stpn

Reputation: 6394

Drawing line (freeform) on Google maps?

Hi I want to draw a line (free-form, Photoshop pencil / paintbrush style) over Google maps.

What would be the best way to do it?

How complicated would it be to do this AND keep the zoom option (so that line scales / disappears when the map is scaled)?

Which would be the best library to use for that (canvas? svg? something else)?

Upvotes: 1

Views: 967

Answers (1)

Rick
Rick

Reputation: 1573

You could use the built indrawing tools, but if I recall correctly, you would need to click quite a bit to get a free form line.

Here's another pretty rough idea. Capture the mouse coordinates of the map container, grab the latLng from a google.maps.MapCanvasProjection and push the coordinates to a polyline path.

var map;
var elevator;
var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(46.87916, -3.32910),
    mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);
var markers = [];

var isDrawing = false;
var overlay = new google.maps.OverlayView();
overlay.draw = function () {};
overlay.setMap(map);

// Add a listener for idle event and call getElevation on a random set of marker in the bound
google.maps.event.addListener(map, 'click', function () {
    var polyLine = new google.maps.Polyline({
        map: map
    });
    $("#map").mousemove(function (e) {
        var pageX = e.pageX;
        var pageY = e.pageY;
        var point = new google.maps.Point(parseInt(pageX), parseInt(pageY));

        var latLng = overlay.getProjection().fromDivPixelToLatLng(point);


        polyLine.getPath().push(latLng);
    });

});

Upvotes: 2

Related Questions