API tools faq
paste
Advertisement
MChaos

map google

MChaos
Dec 13th, 2021
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 12.13 KB | None | 0 0
raw download clone embed print report
  1. <?php if (!empty($image)) { ?>
  2. <section class="gray__bgd grey__bgd_image" style="background: url('<?= newthumbs($image, 'menu', 1920, 160, '1920x160x1', 1) ?>')">
  3.     <?php } else { ?>
  4.     <section class="gray__bgd" >
  5.         <?php } ?>
  6.     <div class="wrapper">
  7.         <!-- <img class="img-page" src="images/image 68.png" alt=""> -->
  8.         <ul class="breadcrumbs">
  9.             <li class="bread__a"><a href="/<?= $uri1 ?>"><?= $home ?></a></li>
  10.             <li class="bread__span"><span><?= $page_name ?></span></li>
  11.         </ul>
  12.         <h1 class="search-title"><?= $page_name ?></h1>
  13.     </div>
  14. </section>
  15. <section class="shop-map">
  16.     <div class="wrapper">
  17.         <div class="shop-map__top">
  18.             <div class="select-map">
  19.                 <div class="select__head">
  20.                     <span class="head-text"><?= STORES_LISTA ?> (<?= $stores_count ?>)</span>
  21.                     <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
  22.                         <path d="M4.5 0L8.39712 5.25L0.602886 5.25L4.5 0Z" fill="#64696C"/>
  23.                     </svg>
  24.                 </div>
  25.                 <div class="select__body">
  26.                     <div class="form__body_up-top"></div>
  27.                     <ul>
  28.                         <?php foreach ($stores as $item) { ?>
  29.                             <li class="placemark<?= $item->id ?>">
  30.                                 <svg width="24" height="25" viewBox="0 0 24 25" fill="none"
  31.                                      xmlns="http://www.w3.org/2000/svg">
  32.                                     <g opacity="0.2">
  33.                                         <path fill-rule="evenodd" clip-rule="evenodd"
  34.                                               d="M12 23.6191L12.6577 23.0376C18.1887 18.1477 21 13.878 21 10.125C21 4.81 16.9029 1.01245 12 1.01245C7.09705 1.01245 3 4.81 3 10.125C3 13.878 5.81131 18.1477 11.3423 23.0376L12 23.6191ZM12 20.9216C7.30661 16.6389 5 13.0098 5 10.125C5 5.97026 8.16411 3.03745 12 3.03745C15.8359 3.03745 19 5.97026 19 10.125C19 13.0098 16.6934 16.6389 12 20.9216ZM12 5.06245C14.7614 5.06245 17 7.32901 17 10.125C17 12.9209 14.7614 15.1875 12 15.1875C9.23858 15.1875 7 12.9209 7 10.125C7 7.32901 9.23858 5.06245 12 5.06245ZM9 10.125C9 8.44739 10.3431 7.08745 12 7.08745C13.6569 7.08745 15 8.44739 15 10.125C15 11.8025 13.6569 13.1625 12 13.1625C10.3431 13.1625 9 11.8025 9 10.125Z"
  35.                                               fill="#64696C"/>
  36.                                     </g>
  37.                                 </svg>
  38.                                 <div class="li__text">
  39.                                     <h3 class=""><?= $item->title ?>
  40.                                         <span class="<?php if ($item->o == 1){ ?>green-text<?php } ?>"><?= $item->open ?></span>
  41.                                     </h3>
  42.                                     <p class=""><?=$item->cities?>, <?= $item->address ?></p>
  43.                                     <p class=""><?= $item->graph ?></p>
  44.                                 </div>
  45.                             </li>
  46.                         <?php } ?>
  47.                     </ul>
  48.                 </div>
  49.             </div>
  50.             <label for="">
  51.                 <form class="search_stors" action="/<?= $uri1 ?>/<?= $uri2 ?>" method="get" style="height: 100%;">
  52.                     <input placeholder="<?= SEARCH_BY_ADDRESS ?> " type="text" name="search" id="search_stors" value="">
  53.                     <button class="form_search" type="submit">
  54.                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  55.                         <g opacity="0.5">
  56.                             <path d="M19.7142 19.7142L15.9856 15.9856M17.9999 11.1428C17.9999 14.9299 14.9299 17.9999 11.1428 17.9999C7.35569 17.9999 4.28564 14.9299 4.28564 11.1428C4.28564 7.35569 7.35569 4.28564 11.1428 4.28564C14.9299 4.28564 17.9999 7.35569 17.9999 11.1428Z"
  57.                                   stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
  58.                         </g>
  59.                     </svg>
  60.                     </button>
  61.                 </form>
  62.             </label>
  63.         </div>
  64.     </div>
  65.     <div id="map"></div>
  66. </section>
  67.  
  68. <script>
  69.     var markerCluster = '';
  70.     var marcers_all = [];
  71.     var marcers_all_item = [];
  72.  
  73.     google.maps.event.addDomListener(window, 'load', init);
  74.     var map;
  75.     var locations = [
  76.         <?php foreach ($stores_map as $stor){ ?>
  77.         ['<?=$stor->title?>', <?=$stor->lat?>, <?=$stor->lng?>, '<?=$stor->cities?>, <?=$stor->address?> <br> <?=$stor->graph?>'],
  78.         <?php } ?>
  79.     ];
  80.  
  81.     function init() {
  82.         var myOptions = {
  83.             <?php if ($count_stores == 1){?>
  84.             center: new google.maps.LatLng(<?=$stores_map[0]->lat?>,<?=$stores_map[0]->lng?>), // Координаты, какое место отображать на карте
  85.             zoom: 14, // Уровень риближения карты
  86.             <?php }elseif(!empty($cities_map)){?>
  87.             center: new google.maps.LatLng(<?=$cities_map[0]->lat?>,<?=$cities_map[0]->lng?>), // Координаты, какое место отображать на карте
  88.             zoom: 14,
  89.             <?php }else{?>
  90.             center: new google.maps.LatLng(47.339237,28.491552), // Координаты, какое место отображать на карте
  91.             zoom: 8,
  92.             <?php }?>
  93.             mapTypeId: google.maps.MapTypeId.ROADMAP // Тип карты
  94.         };
  95.  
  96.         map = new google.maps.Map(document.getElementById("map"), // В каком блоке будет отображаться карта
  97.             myOptions);
  98.         setMarkers(map, locations);
  99.     }
  100.  
  101.     function setMarkers(map, locations) {
  102.  
  103.         var marker, i, mark_position;
  104.         for (i = 0; i < locations.length; i++) { // Проходимся по нашему массиву с марками
  105.  
  106.             // Тут вроде и так все понятно
  107.             var title = locations[i][0];
  108.             var lat = locations[i][1];
  109.             var long = locations[i][2];
  110.             var text = locations[i][3];
  111.  
  112.             mark_position = new google.maps.LatLng(lat, long); // Создаем позицию для отметки
  113.  
  114.             marker = new google.maps.Marker({ // Что будет содержаться в отметке
  115.                 map: map, // К какой карте относиться отметка
  116.                 title: title, // Заголовок отметки
  117.                 position: mark_position, // Позиция отметки
  118.                 animation: google.maps.Animation.DROP, // Анимация
  119.                 icon: {
  120.                     url: "/assets/img/marker.png",
  121.                     scaledSize: new google.maps.Size(45, 52)
  122.                 }
  123.             });
  124.             // Дальше создаем контент для каждой отметки
  125.             marcers_all[i] = marker;
  126.             var content = '<div class="info-block"><h3>' + title + '</h3>' + text + '</div>';
  127.             var infowindow = new google.maps.InfoWindow();
  128.  
  129.             // При нажатии на марку, будет отображаться контент
  130.  
  131.             marcers = google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
  132.                 return function () {
  133.                     infowindow.setContent(content);
  134.                     infowindow.open(map, marker);
  135.                     map.setZoom(18);
  136.                 };
  137.             })(marker, content, infowindow));
  138.         }
  139.         new MarkerClusterer(map,  marcers_all,  {
  140.             imagePath:
  141.                 "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
  142.         });
  143.  
  144.     }
  145.  
  146.     <?php foreach ($stores as $stor){ ?>
  147.     $(function () {
  148.         $('.placemark<?=$stor->id?>').click(function () {
  149.             var latLng = new google.maps.LatLng(<?=$stor->lat?>, <?=$stor->lng?>); //Makes a latlng
  150.             map.panTo(latLng); //Make map global
  151.             map.setZoom(16);
  152.             $('.store_select').html('<?=$stor->title?>');
  153.             $('ul li').removeClass('active_shop');
  154.             $(this).addClass('active_shop');
  155.             $.ajax({
  156.                 url: '/CheckedStor/', // путь к обработчику
  157.                 type: 'POST', // метод отправки
  158.                 data: {checkedstor: "<?=$stor->id?>"},
  159.                 success: function (data) {
  160.                     console.log("УСПЕХ"); // выводим сообщение в консоль
  161.                 },
  162.                 error: function (data) {
  163.                     console.log(data);  // выводим ошибку в консоль
  164.                 }
  165.             });
  166.         });
  167.     });
  168.     <?php } ?>
  169.     $('body').on('click', '#search_stors', function () {
  170.         $('body .select__head_open').trigger('click');
  171.     });
  172.  
  173.  
  174.  
  175.  
  176.     var locations_all = [
  177.         <?php foreach ($stores as $stor){ ?>
  178.         ['<?=$stor->title?>', <?=$stor->lat?>, <?=$stor->lng?>, '<?=$stor->cities?>, <?=$stor->address?> <br> <?=$stor->graph?>'],
  179.         <?php } ?>
  180.     ];
  181.     function init_all() {
  182.         var myOptions = {
  183.             center: new google.maps.LatLng(47.339237,28.491552), // Координаты, какое место отображать на карте
  184.             zoom: 8, // Уровень риближения карты
  185.             mapTypeId: google.maps.MapTypeId.ROADMAP // Тип карты
  186.         };
  187.  
  188.     }
  189.     function setMarkers_all(map, locations) {
  190.  
  191.         var marker, i, mark_position;
  192.         for (i = 0; i < locations.length; i++) { // Проходимся по нашему массиву с марками
  193.  
  194.             // Тут вроде и так все понятно
  195.             var title = locations[i][0];
  196.             var lat = locations[i][1];
  197.             var long = locations[i][2];
  198.             var text = locations[i][3];
  199.  
  200.             mark_position = new google.maps.LatLng(lat, long); // Создаем позицию для отметки
  201.  
  202.             marker = new google.maps.Marker({ // Что будет содержаться в отметке
  203.                 map: map, // К какой карте относиться отметка
  204.                 title: title, // Заголовок отметки
  205.                 position: mark_position, // Позиция отметки
  206.                 animation: google.maps.Animation.DROP, // Анимация
  207.                 icon: {
  208.                     url: "/assets/img/marker.png",
  209.                     scaledSize: new google.maps.Size(45, 52)
  210.                 }
  211.             });
  212.             // Дальше создаем контент для каждой отметки
  213.             marcers_all_item[i] = marker;
  214.             var content = '<div class="info-block"><h3>' + title + '</h3>' + text + '</div>';
  215.             var infowindow = new google.maps.InfoWindow();
  216.  
  217.             // При нажатии на марку, будет отображаться контент
  218.  
  219.             google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
  220.                 return function () {
  221.                     infowindow.setContent(content);
  222.                     infowindow.open(map, marker);
  223.                     map.setZoom(18);
  224.                 };
  225.             })(marker, content, infowindow));
  226.         }
  227.         new MarkerClusterer(map,  marcers_all_item,  {
  228.             imagePath:
  229.                 "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
  230.         });
  231.     }
  232.  
  233.     $('body').on('click', '.select__head', function () {
  234.         init_all();
  235.         $('.select__body').removeClass('d-none');
  236.         $('.select__body').addClass('d-block');
  237.     });
  238.  
  239.     $('body').on('click', '.li__text', function () {
  240.         $('.select__body').addClass('d-none');
  241.         $('.shop-map__top').removeClass('shop-map__top_active');
  242.         $('.select__body').removeClass('d-block');
  243.     });
  244. </script>
  245.  
  246. <style>
  247.     #map {
  248.         height: 600px;
  249.         width: 100%;
  250.     }
  251. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!