overlay-symbol-dashed.html

/tests/com/google/caja/apitaming/maps/overlay-symbol-dashed.html

http://google-caja.googlecode.com/
HTML | 53 lines | 47 code | 6 blank | 0 comment | 0 complexity | 1e31d5d02093ebb54086ccbddc67f5ff MD5 | raw file
Possible License(s): BSD-2-Clause, AGPL-3.0, BSD-3-Clause, CPL-1.0, GPL-2.0, GPL-3.0, Apache-2.0, MPL-2.0-no-copyleft-exception


<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Symbols on a Polyline</title>
    <link href="standard.css" rel="stylesheet">
    <script src="https://www.google.com/jsapi"></script>
    <script>
      function initialize() {
        var myLatLng = new google.maps.LatLng(20.291, 153.027);
        var mapOptions = {
          zoom: 6,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };

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

      var lineCoordinates = [
        new google.maps.LatLng(22.291, 153.027),
        new google.maps.LatLng(18.291, 153.027)
      ];

      var lineSymbol = {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        scale: 4
      };

      var line = new google.maps.Polyline({
        path: lineCoordinates,
        strokeOpacity: 0,
        icons: [{
          icon: lineSymbol,
          offset: '0',
          repeat: '20px'
        }],
        map: map
      });

    }

      google.load('maps', '3.0', {
        callback: initialize,
        other_params: 'sensor=false',
      });
    </script>
  </head>
  <body>
    <div id="map_canvas" style="height:300px; width: 300px"></div>
  </body>
</html>