Google map

by Slava Che

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;key=AIzaSyBZ7Z2AWMEE8MdOBDdY4DCQjStpHI3wx5M&amp;&amp;language=ru"></script>
<br>
<div class="container">
  <ul class="nav nav-pills">
    <li><a href="#" id="draw">Draw</a></li>
    <li><a href="#" id="clear-draw">Clear Draw</a></li>
  </ul>

  <br>

  <div id="map_canvas"></div>

</div>

CSS

html,
    body {
      height: 100%;
      margin: 0
    }
    
    #map_canvas {
      width: 100%;
      height: 500px;
      background-color: #eee;
    }

JavaScript

function initialize() {

    var mapCenter = {lat: 53.354649, lng: 83.770900};

    var mapOptions = {
      zoom: 12,
      center: mapCenter,
      //center: {lat: 53.350551, lng: 83.725691},
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: true,
      draggable: true,
      streetViewControl: false,
      mapTypeControl: false,
      streetViewControl: false,
    };

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

    /* ----------------------  Markers  ---------------------- */
    var locations = [
      {lat: 53.354659, lng: 83.769607},
      {lat: 53.365659, lng: 83.739607},
      {lat: 53.334659, lng: 83.763607},
      {lat: 53.359659, lng: 83.759607},
      {lat: 48.660523, lng: 33.119035},
      {lat: 56.043045, lng: 92.870041},
      {lat: 53.338843, lng: 83.783598}
    ];

    var markers = Array(),
        i;

    for (i = locations.length - 1; i >= 0; i--) {
      markers.push( new google.maps.Marker({ position: locations[i], map: map }) );
    }

/*    var testMarker = new google.maps.Marker({
                      //position: {lat: 53.338882, lng: 83.783030},
                      position: {lat: 53.355129, lng: 83.750472},
                      map: map,
                      icon: "https://mt.googleapis.com/vt/icon/name=icons/onion/112-purple.png",
      });*/



    poly = new google.maps.Polyline({
      map: map,
      clickable:false,
    });


    $('#draw').click(function(e) {
        $('.nav-pills li').removeClass('active');
        $(this).parent().addClass('active');
        map.setOptions({draggable: false});
        
        google.maps.event.addDomListener(map.getDiv(),'mousedown',function(e){
          //do it with the right mouse-button only
          if(e.button!= 0) return; 
          //the polygon
          poly = new google.maps.Polyline({
                map: map,
                clickable: false,
                strokeColor: '#FF0000',
              });
          var...