26 октября 2017
Нет комментариев
HTML:
<div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
Javascript:
var map; function initMap(){ map=new google.maps.Map(document.getElementById('map'),{ center:{lat:50.464579,lng:30.522939}, zoom:17, scrollwheel:false, }); var image='/images/icon_pin.png'; var marker=new google.maps.Marker({ position:{lat:50.464579,lng:30.522939}, map:map, icon:image, title:'Адрес', }); var infowindow=new google.maps.InfoWindow({ content:'Название компании<br/>Адрес', }); marker.addListener('click',function(){ infowindow.open(map,marker); }); var styledMapType=new google.maps.StyledMapType( [ { "elementType":"geometry", "stylers":[ { "color":"#f5f5f5" } ] }, { "elementType":"labels.icon", "stylers":[ { "visibility":"off" } ] }, { "elementType":"labels.text.fill", "stylers":[ { "color":"#616161" } ] }, { "elementType":"labels.text.stroke", "stylers":[ { "color":"#f5f5f5" } ] }, { "featureType":"administrative.land_parcel", "elementType":"labels.text.fill", "stylers":[ { "color":"#bdbdbd" } ] }, { "featureType":"poi", "elementType":"geometry", "stylers":[ { "color":"#eeeeee" } ] }, { "featureType":"poi", "elementType":"labels.text.fill", "stylers":[ { "color":"#757575" } ] }, { "featureType":"poi.park", "elementType":"geometry", "stylers":[ { "color":"#e5e5e5" } ] }, { "featureType":"poi.park", "elementType":"labels.text.fill", "stylers":[ { "color":"#9e9e9e" } ] }, { "featureType":"road", "elementType":"geometry", "stylers":[ { "color":"#ffffff" } ] }, { "featureType":"road.arterial", "elementType":"labels.text.fill", "stylers":[ { "color":"#757575" } ] }, { "featureType":"road.highway", "elementType":"geometry", "stylers":[ { "color":"#dadada" } ] }, { "featureType":"road.highway", "elementType":"labels.text.fill", "stylers":[ { "color":"#616161" } ] }, { "featureType":"road.local", "elementType":"labels.text.fill", "stylers":[ { "color":"#9e9e9e" } ] }, { "featureType":"transit.line", "elementType":"geometry", "stylers":[ { "color":"#e5e5e5" } ] }, { "featureType":"transit.station", "elementType":"geometry", "stylers":[ { "color":"#eeeeee" } ] }, { "featureType":"water", "elementType":"geometry", "stylers":[ { "color":"#c9c9c9" } ] }, { "featureType":"water", "elementType":"labels.text.fill", "stylers":[ { "color":"#9e9e9e" } ] } ], {name:'Styled Map'} ); map.mapTypes.set('styled_map',styledMapType); map.setMapTypeId('styled_map'); }
CSS:
#map{ width:570px; height:530px; }
Подробнее: https://developers.google.com/maps/documentation/javascript/
Google Maps APIs Styling Wizard для быстрого создания объекта стиля JSON: https://mapstyle.withgoogle.com/
