Оформление карт Google под себя


Оформление карт Google под себя

Знаете ли вы, что у нас есть возможность полностью контролировать стили отображения карт Google. Сегодня мы покажем, как это использовать.

Оформление карт Google под себя

Оформление карт Google под себяОформление карт Google под себя

Карты Google по умолчанию

<pre><script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(Latitude_Value,Longitude_Value);

function initialize()
{
var mapOptions = {
zoom: 8,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML код
<div id="map-canvas" style="height:100%"></div></pre>

Добавление стилей

Стилизуем Карты Google.

<pre>styles:[
{
    "featureType": "transit.station.rail",
    "stylers": [
         { "visibility": "on" },
         { "invert_lightness": true },
         { "color": "#808080" },
         { "weight": 0.1 },
         { "saturation": 1 },
         { "lightness": 1 },
         { "gamma": 1 }
      ]
},
{
....
}
]

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);

function initialize()
{
var mapOptions = {
backgroundColor: "#ffffff", // цвет фона
zoom: 8, // масштаб
disableDefaultUI: true,
draggable: false,
scrollwheel: false,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//----------- стили ----------
styles: [
{
   "featureType": "landscape.natural",
   "elementType": "geometry.fill",
   "stylers": [
   { "color": "#ffffff" }
    ]
},
{
   "featureType": "landscape.man_made",
   "stylers": [
   { "color": "#ffffff" },
   { "visibility": "off" }
   ]
},
{
   "featureType": "water",
   "stylers": [
   { "color": "#80C8E5" },  // цвет для воды
   { "saturation": 0 }
   ]
},
{
   "featureType": "road.arterial",
   "elementType": "geometry",
   "stylers": [
   { "color": "#999999" }
    ]
}
,{
   "elementType": "labels.text.stroke",
   "stylers": [
   { "visibility": "off" }
  ]
}
,{
   "elementType": "labels.text",
   "stylers": [
   { "color": "#333333" }
   ]
}
,{
   "featureType": "poi",
   "stylers": [
   { "visibility": "off" }
   ]
}
]
//------------конец --------------
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML код
<div id="map-canvas" style="height:100%"></div></pre>

Инструмент для оформления карт Google

Так же вы можете воспользоваться специальным инструментом для оформления карт.

Добавляем маркер

Добавляем свою собственную иконку для маркера.

<pre><script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);

var markers = [];
var image = new google.maps.MarkerImage( '9lessons.png', // иконка
new google.maps.Size(84,56), // размеры иконок
new google.maps.Point(0,0),
new google.maps.Point(42,56)
);

function addMarker()
{
markers.push(new google.maps.Marker({
position: mapCoordinates,
raiseOnDrag: false,
icon: image,
map: map,
draggable: false
}));
}

function initialize()
{
var mapOptions = {
.......
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
addMarker(); // вызов функции
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML код
<div id="map-canvas" style="height:100%"></div></pre>

Источник урока:  ruseller.com

Previous 15 новых адаптивных CSS фрэймворков
Next Градиентный текст

Suggested Posts

YML импорт экспорт Яндекс Маркет для OpenCart 2

WordPress: закрываем сайт на техническое обслуживание

Модуль для OpenCart 3.х — Новая Почта API v 3.3.1

Новый плагин для защиты WordPress — iThemes Security

Как бесплатно продвинуть блог

Инструкция как стать программистом с нуля