Google maps
tutorial: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
by Qwerty_Wasd
HTML
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2FxFj12yDMrAxkcwfsDx9L7pSspqJD6c&callback=initMap&language=ru"></script>
<select id="city_dropdown"></select>
<div id="map"></div>
CSS
#map {
width: 100%;
height: 400px;
}
JavaScript
function initMap() {
var countryInfo = [
{
name: 'Монголия',
value: 'Монголия',
icon: null,
link: '/trans/mongolia'
},
{
name: 'Москва',
value: 'Москва',
icon: null,
link: '/trans/moscow',
},
{
name: 'Китай',
value: 'Китай',
icon: null,
link: '/trans/china'
},
{
name: 'Минск',
value: 'Минск',
icon: null,
link: '/trans/minsk'
},
{
name: 'Иран',
value: 'Иран',
icon: null,
link: '/trans/iran'
},
]
var map = new google.maps.Map(document.getElementById("map"), {
center: {lat: 53.877805, lng: 27.540712},
zoom: 3,
maxZoom: 3,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
styles: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#1d2c4d"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8ec3b9"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1a3646"
}
]
},
{
...