Maps API v3 Symbol cut on tile edge solution

http://stackoverflow.com/questions/24853312

by upsidown

HTML

<script src="https://maps.googleapis.com/maps/api/js?&amp;sensor=false"></script>
<div id="map-canvas"></div>

CSS

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

JavaScript

function initialize() {
    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(20.291, 153.027),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

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

    // Define your custom symbol path
    var lineSymbol = {
        path: 'M -2,0 0,-2 2,0 z',
        strokeColor: '#F00',
        fillColor: '#F00',
        fillOpacity: 1
    };

    // Create the polyline and add the symbol via the 'icons' property.

    var lineCoordinates = [
    new google.maps.LatLng(22, 150),
    new google.maps.LatLng(20, 145.7)];

    var line = new google.maps.Polyline({
        path: lineCoordinates,
        icons: [{
            icon: lineSymbol,
            offset: '100%'
        }],
        strokeColor: 'red',
        strokeWeight: 8,
        draggable: true,
        map: map
    });
}

initialize();