Demo google map styled simple
RUN
<!DOCTYPE html> <html> <head> <title>Simple styled maps</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script> <script> // biến map var map; // Tọa độ TP HCM var brooklyn = new google.maps.LatLng(10.771971, 106.697845); // Tạo một token tên var MY_MAPTYPE_ID = 'demo_custom_style'; function initialize() { // Danh sách Style var featureOpts = [ { elementType: 'geometry', stylers: [ {hue: '#890000'}, {visibility: 'simplified'}, {gamma: 0.5}, {weight: 0.5} ] }, { elementType: 'labels', stylers: [ {visibility: 'off'} ] }, { featureType: 'water', stylers: [ {color: '#890000'} ] } ]; // Tạo options hiển thị bản đồ var mapOptions = { zoom: 12, center: brooklyn, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] }, mapTypeId: MY_MAPTYPE_ID }; // Hiển thị map map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var styledMapOptions = { name: 'Custom Style' }; // Đổi style cho map var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); map.mapTypes.set(MY_MAPTYPE_ID, customMapType); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
PHÓNG TO