Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
​
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>
</head>
<body>
  <div class="dealers-map">
    <div class="point">
      <li data-coordinat="55.1,82.1" data-url="#" data-name="point-1" data-id="01">point-01
        <p>point param</p>
      </li>
      <li data-coordinat="55.2,82.2" data-url="#" data-name="point-2" data-id="02">point-02
        <p>point param</p>
      </li>
      <li data-coordinat="55.3,82.3" data-url="#" data-name="point-3" data-id="03">point-03
        <p>point param</p>
      </li>
      <li data-coordinat="55.4,82.4" data-url="#" data-name="point-4" data-id="04">point-04
        <p>point param</p>
      </li>
      <li data-coordinat="55.5,82.3" data-url="#" data-name="point-5" data-id="05">point-05
        <p>point param</p>
      </li>
      <li data-coordinat="55.6,82.2" data-url="#" data-name="point-6" data-id="06">point-06
        <p>point param</p>
      </li>
      <li data-coordinat="55.7,82.1" data-url="#" data-name="point-7" data-id="07">point-07
        <p>point param</p>
      </li>
      <li data-coordinat="55.8,82.8" data-url="#" data-name="point-8" data-id="08">point-08
        <p>point param</p>
      </li>
    </div>
  </div>
  <div id="gomap"></div>
  <div class="contact-city_wrap">
    <a href="#" data-id="01">show point-01</a>
    <a href="#" data-id="02">show point-02</a>
    <a href="#" data-id="03">show point-03</a>
    <a href="#" data-id="04">show point-04</a>
    <a href="#" data-id="05">show point-05</a>
    <a href="#" data-id="06">show point-06</a>
    <a href="#" data-id="07">show point-07</a>
    <a href="#" data-id="08">show point-08</a>
  </div>
<script>
  function GMapsInit(){
    if($('#gomap').length) {
      var mapMarkers= {}; // создаю объект, в который буду добавлять маркеры по айди
      map = new GMaps({
        div: '#gomap',
        zoom: 6,
        lat: 55.02480160288231,
        lng: 82.92944544445794,
        scrollwheel: false,
        mapTypeControl: false,
        panControl: false,
        streetViewControl: false,
        zoomControl: true,
        zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
      });
      
      $('.dealers-map .point li').each(function(){
        var coordinat = $(this).data('coordinat');
        var urlPath = $(this).data('url');
        var name = $(this).data('name');
        var idItem = $(this).data('id');
        var arrCoordinat = coordinat.split(',');
        var itemArr = [];
        
        $(this).find('p').each(function(){
          var item = $(this).text();
          
          itemArr.push('<p>'+item+'</p>');
        });
        var items = itemArr.join('');
        
        // создаю маркер, сохраняю ссылку в переменную
        var marker = map.addMarker({
          lat: arrCoordinat[0],
          lng: arrCoordinat[1],
          title: 'bx-id-'+idItem,
          //icon: '/bitrix/templates/main/img/icon-marker.png',
          infoWindow: {
            content: '<div id="bx-id-'+idItem+'" class="baloon-innr"><h3>'+name+'</h3>'+items+'<a href="'+urlPath+'">Контактная информация</a></div>'
          }
        });
​
         // добавляю маркер на карту
         map.addMarker(marker);
​
         // добавляю ссылку на маркер в объект
         mapMarkers[idItem ] = marker;
      });
      
      $('.contact-city_wrap a').click(function(){
          var link = $(this).data('id');
          // беру маркер по айди
          var marker = mapMarkers[link];
          // если такой есть - показываю
          if (marker) {
               google.maps.event.trigger(marker, "click");
          }
      });
      
    }
  }
  google.maps.event.addDomListener(window, 'load', GMapsInit);
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers