<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);
This Pen doesn't use any external CSS resources.