title: Google Map with Markers related to ul list
body: <p>How to make a marker related with ul list. 
  On hover the list that related Marker should make active like same as how the mousehover.</p>
  
  <p><strong>Example.</strong></p>
  
  <p>Panel 1:
  Location 1
  Location 2
  Location 3</p>
  
  <p>Panel 2:
  Map with markers</p>
  
  <p><strong>My Code:</strong></p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;link href="assets/css/map-icons.css" type="text/css" rel="stylesheet"&gt;
  &lt;script src="assets/js/map-icons.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      height: 100%;
    }
    .label {
      color:#fff;
      font-size:14px;
    }
  &lt;/style&gt;&lt;ul&gt;
      &lt;li&gt;Marker 1&lt;/li&gt;
      &lt;li&gt;Marker 2&lt;/li&gt;
      &lt;li&gt;Marker 2&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;script&gt;
  function initialise() {
      var myLatLng = {lat: -25.363, lng: 131.044};
      var myLatLng1 = {lat: -29.363, lng: 131.044};
  
      var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center: myLatLng
      });
  
      var Map_Pin = 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z';
  
      var icon1 = {
            path: Map_Pin,
            fillColor:'#cc0000',
            fillOpacity: 1,
            strokeColor:'#cc0000',
            strokeWeight: 2,
            scale: 0.9
          };
      var icon2 = {
            path: Map_Pin,
            fillColor:'#00ff00',
            fillOpacity: 1,
            strokeColor:'#00ff00',
            strokeWeight: 2,
            scale: 1
          };
      //One
      var marker = new Marker({
          position: myLatLng,
          map: map,
          icon: icon1,
          map_icon_label: '&lt;span class="label"&gt;B&lt;/span&gt;',
      });
      var infowindow = new google.maps.InfoWindow({
          content: 'Welcome'
      });
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map, this);
      });
      google.maps.event.addListener(marker, 'mouseover', function() {
          marker.setIcon(icon2);
      });
      google.maps.event.addListener(marker, 'mouseout', function() {
          marker.setIcon(icon1);
      });
  
      //Two
      var marker1 = new Marker({
          position: myLatLng1,
          map: map,
          icon: icon1,
          map_icon_label: '&lt;span class="label"&gt;C&lt;/span&gt;',
      });
      var infowindow1 = new google.maps.InfoWindow({
          content: 'Welcome C'
      });
      google.maps.event.addListener(marker1, 'click', function(e) {
          infowindow1.open(map, this);
      });
      google.maps.event.addListener(marker1, 'mouseover', function() {
          marker1.setIcon(icon2);
      });
      google.maps.event.addListener(marker1, 'mouseout', function() {
          marker1.setIcon(icon1);
      });
    }
    google.maps.event.addDomListener(window, 'load', initialise);
  &lt;/script&gt;
  </code></pre>