<div style="padding:100px;overflow:hidden;">  
  
<a href="#" class="callback_button text-center">КАРТА</a>
    
  </div>

  <!--modal-->
    <div style="display: none;">
        <div class="box-modal text-center" id="call_back">
            <div class="box-modal_close arcticmodal-close">закрыть</div>

 <div id="map" class="map"></div>

        </div>
    </div>
    <!-- </modal> -->
.arcticmodal-overlay,
.arcticmodal-container { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; }
.arcticmodal-container { overflow: auto; margin: 0; padding: 0; border: 0; border-collapse: collapse; }
*:first-child+html .arcticmodal-container { height: 100% }
.arcticmodal-container_i { height: 100%; margin: 0 auto; }
.arcticmodal-container_i2 { padding: 24px; margin: 0; border: 0; vertical-align: middle; }
.arcticmodal-error { padding: 20px; border-radius: 10px; background: #000; color: #fff; }
.arcticmodal-loading { width: 80px; height: 80px; border-radius: 10px; background: #000 url(loading.gif) no-repeat 50% 50%; }

.box-modal {
  position: relative;
  width: 500px;
  padding: 16px;
  background: #fff;
  color: #3c3c3c;
  font: 14px/18px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
  box-shadow: 0 0 0 6px rgba(153, 153, 153, .3);
  border-radius: 6px;
}
.box-modal_close { position: absolute; right: 10px; top: 6px; font-size: 11px; line-height: 15px; color: #999; cursor: pointer; }
.box-modal_close:hover { color: #666; }
.map {
    height: 350px;
    position: relative;
    width: 100%;
}

$(function(){
  
  
  $('.callback_button').click(function () {
    $('#call_back').arcticmodal({
    beforeOpen: function(data, el) {
           initialize();
    },
});
        return false;
    });

});


var geo; 
var address = 'Дубна Московская область';
function initialize() { 
geo = new google.maps.Geocoder();    
geo.geocode({ 'address' : address}, function (results,status) {
if(status == google.maps.GeocoderStatus.OK) { 
var latlng = theMap.setCenter(results[0].geometry.location);
var secheltLoc = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
var marker = new google.maps.Marker({
                    map: theMap,
                    icon: image,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: secheltLoc,
                    visible: true
});
}
});
             image = {
              url: "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Marker-Outside-Chartreuse-icon.png", 
              anchor: new google.maps.Point(26, 51),
              scaledSize: new google.maps.Size(51, 51)   
             };
                var myMapOptions = {
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    zoom: 15,
                    scrollwheel: false,
                    mapTypeControl: false,
                    zoomControl: true,
styles: [{
                                            "featureType": "landscape",
                                            "stylers": [{
                                                "saturation": -100
                                            }, {
                                                "lightness": 65
                                            }, {
                                                "visibility": "on"
                                            }]
                                        }, {
                                            "featureType": "poi",
                                            "stylers": [{
                                                "saturation": -100
                                            }, {
                                                "lightness": 51
                                            }, {
                                                "visibility": "simplified"
                                            }]
                                        }, {
                                            "featureType": "road.highway",
                                            "stylers": [{
                                                "saturation": -100
                                            }, {
                                                "visibility": "simplified"
                                            }]
                                        }, {
                                            "featureType": "road.arterial",
                                            "stylers": [{
                                                "saturation": -100
                                            }, {
                                                "lightness": 30
                                            }, {
                                                "visibility": "on"
                                            }]
                                        }, {
                                            "featureType": "road.local",
                                            "stylers": [{
                                                "saturation": -100
                                            }, {
                                                "lightness": 40
                                            }, {
                                                "visibility": "on"
                                            }]
                                        }, {
                                            "featureType": "transit",
                                            "stylers": [{
                                                "saturation": -100
                                            }, {
                                                "visibility": "simplified"
                                            }]
                                        }, {
                                            "featureType": "administrative.province",
                                            "stylers": [{
                                                "visibility": "off"
                                            }]
                                        }, {
                                            "featureType": "water",
                                            "elementType": "labels",
                                            "stylers": [{
                                                "visibility": "on"
                                            }, {
                                                "lightness": -25
                                            }, {
                                                "saturation": -100
                                            }]
                                        }, {
                                            "featureType": "water",
                                            "elementType": "geometry",
                                            "stylers": [{
                                                "hue": "#ffff00"
                                            }, {
                                                "lightness": -25
                                            }, {
                                                "saturation": -97
                                            }]
                                        }]};
var theMap = new google.maps.Map(document.getElementById("map"), myMapOptions);
}
//google.maps.event.addDomListener(window, 'load', initialize);
document.addEventListener('DOMContentLoaded', initialize);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://arcticlab.ru/arcticmodal/js/arcticmodal/jquery.arcticmodal-0.3.min.js
  3. https://maps.googleapis.com/maps/api/js?key=AIzaSyA4asxO8kGu8rGxbAP_5zezGcy8u1qMQUM