Оформление карт 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

СЕО для начинающих, основы для чайников – урок №2

АДАПТИВНЫЕ ВКЛАДКИ — RESPONSIVE TABS

Модуль для Opencart и Ocstore — сборник

Как увеличить приток трафика?!

Всплывающая подпись к картинке при наведении с помощью CSS3

20 свежайших JQuery плагинов для улучшения интерфейса