<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>