Как вызвать в гугле карте маркер с помощью HTML элемента

[Amilo]

Как вызвать маркер с помощью нажатие на параграфа Mark1?
После клика хочу перейти на указные кординаты и открыт маркер.

<p id="mark1">Mark N1</p>
<p>Mark N2</p>
<p>Mark N3</p>

<div class="map-responsive">
  <div id="map" style="width: 100%; height: 600px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap();
    $("#map").addMarker({
      coords: [41.70457809095281, 44.790178835392],
      title: '<h1>Mark N1</h1>',
      text:  '<p>Info</p>'
    });
    
    
    $("#map").addMarker({
      coords: [41.72648267775168, 44.76699650287628],
      title: '<h1>Mark  N2</h1>',
      text:  '<p>Info</p>'
    });
    
    $("#map").addMarker({
      coords: [41.72063511082718,44.796897768974304],
      title: '<h1>Mark N3</h1>',
      text:  '<p>Info</p>'
    });
  })
</script>
</div>

[Dilettante_Pro]

<p id="mark1">Mark N1</p>
<p>Mark N2</p>
<p>Mark N3</p>

<div class="map-responsive">
  <div id="map" style="width: 100%; height: 600px;"></div>
</div>

<script type="text/javascript">
  $(function() {
    $("#map").googleMap();

    $("#mark1").on("click", function() {
       $("#map").addMarker({
         coords: [41.70457809095281, 44.790178835392],
         title: '<h1>Mark N1</h1>',
         text:  '<p>Info</p>'
       });
    });
    
    
    $("#map").addMarker({
      coords: [41.72648267775168, 44.76699650287628],
      title: '<h1>Mark  N2</h1>',
      text:  '<p>Info</p>'
    });
    
    $("#map").addMarker({
      coords: [41.72063511082718,44.796897768974304],
      title: '<h1>Mark N3</h1>',
      text:  '<p>Info</p>'
    });
  })
</script>

[Amilo]

Таким образом он толька переходит по координатам маркера но не открывает информацию существующую в маркере.
Как я понял загаловка маркера и текс хранится в infowindow
Вот сам фреймворк: https://codepen.io/Evan13/pen/Lyzexq