Google maps
tutorial: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
CSS
#map-canvas {
height: 400px;
width: 100%;
background-color: #CCC;
}
JavaScript
jQuery( document ).ready(function(){
initMap();
});
var center;
function initMap() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(55.9935, 25.230383),
navigationControl: false,
streetViewControl: false,
styles: [
{
"featureType": "administrative.province",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 65
},
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": "50"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": "-100"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "all",
...