Google Map Polyline

<script type="text/javascript">
var map;
var markers = [];
var path = [];

$(function () {

    var opts = {
        zoom: 10,
        center: { lat: 23.564587, lng: 90.569874 },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), opts);



    $('#AttendanceSearch').click(function (e) {
        e.preventDefault();
               

        var newMarker = {};
        newMarker.Latitude = 24.8594959;
        newMarker.Longitude = 89.3631192;
        newMarker.Accuracy = 20.0;
        newMarker.MarkerName = 'hi';
        markers.push(newMarker);
        path.push(new google.maps.LatLng(24.8594959, 89.3631192));

        var markerTwo = {};
        markerTwo.Latitude = 23.9246227;
        markerTwo.Longitude = 90.7130343;
        markerTwo.Accuracy = 20.0;
        markerTwo.MarkerName = 'hello';

        markers.push(markerTwo);
        path.push(new google.maps.LatLng(23.9246227, 90.7130343));

        setArrows = new ArrowHandler();

        //Looping markers array--->
        markers.forEach(function (markerInfo, index) {
            //marker object --->
            var marker = new google.maps.Marker({
                name: markerInfo.MarkerName,
                position: { lat: markerInfo.Latitude, lng: markerInfo.Longitude },
                map: map,
                title: markerInfo.MarkerName
            });
            //marker object ---<

            marker.addListener('click', function () {
                var contentString = "Hello Bro";


                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                infowindow.open(map, marker);
            });

        });
        //Looping markers array ----<

        createPoly(path, "midline");
    });
</script>


<script type="text/javascript">
    //<![CDATA[

    /**
     * Based on code provided by Mike Williams
     * http://econym.org.uk/gmap/arrows.htm
     * Improved and transformed to v3
    */

    var setArrows;


    function ArrowHandler() {
        this.setMap(map);
        // Markers with 'head' arrows must be stored
        this.arrowheads = [];
    }
    // Extends OverlayView from the Maps API
    ArrowHandler.prototype = new google.maps.OverlayView();

    // Draw is inter alia called on zoom change events.
    // So we can use the draw method as zoom change listener
    ArrowHandler.prototype.draw = function () {

        if (this.arrowheads.length > 0) {
            for (var i = 0, m; m = this.arrowheads[i]; i++) {
                m.setOptions({ position: this.usePixelOffset(m.p1, m.p2) });
            }
        }
    };


    // Computes the length of a polyline in pixels
    // to adjust the position of the 'head' arrow
    ArrowHandler.prototype.usePixelOffset = function (p1, p2) {

        var proj = this.getProjection();
        var g = google.maps;
        var dist = 12; // Half size of triangle icon

        var pix1 = proj.fromLatLngToContainerPixel(p1);
        var pix2 = proj.fromLatLngToContainerPixel(p2);
        var vector = new g.Point(pix2.x - pix1.x, pix2.y - pix1.y);
        var length = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
        var normal = new g.Point(vector.x / length, vector.y / length);
        var offset = new g.Point(pix2.x - dist * normal.x, pix2.y - dist * normal.y);

        return proj.fromContainerPixelToLatLng(offset);
    };


    // Returns the triangle icon object
    ArrowHandler.prototype.addIcon = function (file) {
        var g = google.maps;
        var icon = {
            url: "http://www.google.com/mapfiles/" + file,
            size: new g.Size(24, 24), anchor: new g.Point(12, 12)
        };
        return icon;
    };

    // Creates markers with corresponding triangle icons
    ArrowHandler.prototype.create = function (p1, p2, mode) {
        var markerpos;
        var g = google.maps;
        if (mode == "onset") markerpos = p1;
        else if (mode == "head") markerpos = this.usePixelOffset(p1, p2);
        else if (mode == "midline") markerpos = g.geometry.spherical.interpolate(p1, p2, .5);

        // Compute the bearing of the line in degrees
        var dir = g.geometry.spherical.computeHeading(p1, p2).toFixed(1);
        // round it to a multiple of 3 and correct unusable numbers
        dir = Math.round(dir / 3) * 3;
        if (dir < 0) dir += 240;
        if (dir > 117) dir -= 120;
        // use the corresponding icon
        var icon = this.addIcon("dir_" + dir + ".png");
        var marker = new g.Marker({
            position: markerpos,
            map: map, icon: icon, clickable: false
        });
        if (mode == "head") {
            // Store markers with 'head' arrows to adjust their offset position on zoom change
            marker.p1 = p1;
            marker.p2 = p2;
            // marker.setValues({ p1: p1, p2: p2 });
            this.arrowheads.push(marker);
        }
    };

    ArrowHandler.prototype.load = function (points, mode) {
        for (var i = 0; i < points.length - 1; i++) {
            var p1 = points[i],
            p2 = points[i + 1];
            this.create(p1, p2, mode);
        }
    };


    // Draws a polyline with accordant arrow heads
    function createPoly(path, mode) {
        var poly = new google.maps.Polyline({
            strokeColor: "#0000ff",
            strokeOpacity: 0.8,
            strokeWeight: 3,
            map: map,
            path: path
        });

        setArrows.load(path, mode);
        return poly;
    }
</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s