google maps vectors and markers

by bulutkartal

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;extn=.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9" style="text-align:center">
  <div class="table-responsive" style="margin-bottom: 25px">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4>
                    Routes
                </h4>
      </div>
      <table class="table table-striped table-bordered table-fixed">
        <thead>
          <tr>
            <th>Selection</th>
            <th>From</th>
            <th>To</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="checkbox" class="plancheckbox" id="poly1" name="poly1" value="poly1" onclick="AssignButtonClicked(this)" data-assigned-id="poly1" />
            </td>
            <td>
              Point Z
            </td>
            <td>
              Point W
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" class="plancheckbox" id="poly2" name="poly2" value="poly2" onclick="AssignButtonClicked(this)" data-assigned-id="poly2" />
            </td>
            <td>
              Point X
            </td>
            <td>
              Point Y
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" class="plancheckbox" id="poly3" name="poly3" value="poly3" onclick="AssignButtonClicked(this)" data-assigned-id="poly2" />
            </td>
            <td>
              Point T
            </td>
            <td>
              Point Q
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div id="map_2385853" style="width:100%; height:300px;"></div>

JavaScript

var locations = {}; //A repository for markers (and the data from which they were contructed).

	//initial dataset for markers
	var locs = {
	  1: {
	    info: '11111. Some random info here',
	    lat: -37.8139,
	    lng: 144.9634
	  },
	  2: {
	    info: '22222. Some random info here',
	    lat: 46.0553,
	    lng: 14.5144
	  },
	  3: {
	    info: '33333. Some random info here',
	    lat: -33.7333,
	    lng: 151.0833
	  },
	  4: {
	    info: '44444. Some random info here',
	    lat: 27.9798,
	    lng: -81.731
	  }
	};
	var map = new google.maps.Map(document.getElementById('map_2385853'), {
	  zoom: 1,
	  maxZoom: 8,
	  minZoom: 1,
	  streetViewControl: false,
	  center: new google.maps.LatLng(40, 0),
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	var infowindow = new google.maps.InfoWindow();

	var auto_remove = true; //When true, markers for all unreported locs will be removed.

	function setMarkers(locObj) {
	  if (auto_remove) {
	    //Remove markers for all unreported locs, and the corrsponding locations entry.
	    $.each(locations, function(key) {
	      if (!locObj[key]) {
	        if (locations[key].marker) {
	          locations[key].marker.setMap(null);
	        }
	        delete locations[key];
	      }
	    });
	  }

	  $.each(locObj, function(key, loc) {
	    if (!locations[key] && loc.lat !== undefined && loc.lng !== undefined) {
	      //Marker has not yet been made (and there's enough data to create one).
	      var line = new google.maps.Polyline({
	        path: [{
	          lat: loc.lat,
	          lng: loc.lng
	        }, {
	          lat: 41.0553,
	          lng: 24.17
	        }],
	        map: map,
	      });
	      line.setMap(map);
	      //Create marker
	      loc.marker = new google.maps.Marker({
	        position: new google.maps.LatLng(loc.lat, loc.lng),
	        map: map
	      });

	      //Attach click listener to marker
	      google.maps.event.addListener(loc.marker, 'click', (function(key) {
	        return function() {
	   ...