Google Maps API + B-Lazy + King Composer – или отложенная загрузка карт | Chrome World по-русски

Google Maps API + B-Lazy + King Composer – или отложенная загрузка карт

<span style="text-align:center">
<iframe style="align:center;" class="b-lazy" src="/google-maps-img.jpg"
        data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2516.095177796534!2d34.806532215747914!3d50.903454979540435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x412901f44e3c2799%3A0xc7dafc2afc358342!2z0LLRg9C70LjRhtGPINCl0LDRgNC60ZbQstGB0YzQutCwLCA0LCDQodGD0LzQuCwg0KHRg9C80YHRjNC60LAg0L7QsdC70LDRgdGC0Yw!5e0!3m2!1sru!2sua!4v1492186204009" 
        frameborder="0" 
        width="100%"
        height="500px"
        allowfullscreen>
    </iframe>
  </span>

Вариант 2 — Если хотим что бы отображался прилоадер пока карта не отобразилась прописываем стили (внимательно читаем код стилей, там полезный комментарий):

.SDStudio_Preloader {
/* Качаем прилоадеры здесь:
https://mediadoma.com/_PRIMERU/Preloader/001_preloader-ZAGRUZKA.gif
https://mediadoma.com/_PRIMERU/Preloader/002_preloader-KRUG.gif 
Далее загружаем прилоадер в корень сайта*/
    background: transparent url(/loading.gif) center center/cover no-repeat scroll;
    background-size: 150px !important;
}

И добавляем div’у класс .SDStudio_Preloader:

<div class="SDStudio_Preloader" style="left: 0; width: 100%; height: 554px; position: relative; padding-bottom: 554px;">
<!--  padding-bottom: 56.2493%;" -->
  <iframe class="b-lazy" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2516.095177796534!2d34.806532215747914!3d50.903454979540435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x412901f44e3c2799%3A0xc7dafc2afc358342!2z0LLRg9C70LjRhtGPINCl0LDRgNC60ZbQstGB0YzQutCwLCA0LCDQodGD0LzQuCwg0KHRg9C80YHRjNC60LAg0L7QsdC70LDRgdGC0Yw!5e0!3m2!1sru!2sua!4v1492186204009" style="border: 0; top: 0; left: 0; width: 100%; height: 554px; position: absolute;" allowfullscreen scrolling="no"></iframe>
<!--  -->
</div>

Вариант 3 — с кастомным маркером (перед блоком с картами должен отработать скрипт b-lazy):

  <!-- Stili dlia bloka s kartoi` -->
<style>
#map-canvas{
  height: 500px;
  width: 100%;
}
</style>
<!-- Blok dlia karty` -->
<div id="map-canvas"></div>



<!-- Google Maps SCRIPT API 
<script class="b-lazy" defer data-src="https://maps.googleapis.com/maps/api/js?key=ЗДЕСЬ ВАШ API КЛЮЧ GOOGLE MAPS"></script>-->
<!-- Custom Sript for Google Maps 
<script class="b-lazy" defer data-src="https://maps.googleapis.com/maps/api/js?key=ЗДЕСЬ ВАШ API КЛЮЧ GOOGLE MAPS"></script>-->


<script src="https://maps.googleapis.com/maps/api/js?key=ЗДЕСЬ ВАШ API КЛЮЧ GOOGLE MAPS"></script>


<script>
// if HTML DOM Element that contains the map is found...
if (document.getElementById('map-canvas')){
    /* Coordinates 48.177536, 11.537836 
    55.9951499,37.2067166,
55.9951499,37.2067166,20*/
  var markerLatLng = new google.maps.LatLng(55.995307, 37.206615);

    var main_color = '#004191', //main color
        saturation_value= -1, //saturation
        brightness_value= 1; //brightness


  var mapOptions = {
    zoom: 16,
    center: markerLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };



  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var markerIcon = {
        /*url: 'http://image.flaticon.com/icons/svg/252/252025.svg',*/
        url:'Map-Marker.jpg',
/*ШИРИНА И ВЫСОТА МАРКЕРА*/
        scaledSize: new google.maps.Size(70, 90),
/*Смещение маркера в нутри блока маркера*/
        origin: new google.maps.Point(0, 0),
/**/
        /* anchor: new google.maps.Point(50,65), */
        labelOrigin:  new google.maps.Point(140,33),
      };


  var markerLabel = ' ';
  var marker = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP,
    position: markerLatLng,
    icon: markerIcon,
    label: {
      text: markerLabel,
      color: "#eb3a44",
      fontSize: "16px",
      fontWeight: "bold"
    }
  });
  };

</script>