213 lines
9.1 KiB
JavaScript
213 lines
9.1 KiB
JavaScript
'use strict';
|
|
|
|
function loadMap(address,theme) {
|
|
var geocoder;
|
|
var map;
|
|
var themes = [];
|
|
|
|
themes["normal"] = [];
|
|
|
|
themes["ultra-white"] = [
|
|
{
|
|
"featureType": "water",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#e9e9e9"
|
|
},
|
|
{
|
|
"lightness": 17
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "landscape",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#f5f5f5"
|
|
},
|
|
{
|
|
"lightness": 20
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.highway",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"color": "#ffffff"
|
|
},
|
|
{
|
|
"lightness": 17
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.highway",
|
|
"elementType": "geometry.stroke",
|
|
"stylers": [
|
|
{
|
|
"color": "#ffffff"
|
|
},
|
|
{
|
|
"lightness": 29
|
|
},
|
|
{
|
|
"weight": 0.2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.arterial",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#ffffff"
|
|
},
|
|
{
|
|
"lightness": 18
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.local",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#ffffff"
|
|
},
|
|
{
|
|
"lightness": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "poi",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#f5f5f5"
|
|
},
|
|
{
|
|
"lightness": 21
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "poi.park",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#dedede"
|
|
},
|
|
{
|
|
"lightness": 21
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"elementType": "labels.text.stroke",
|
|
"stylers": [
|
|
{
|
|
"visibility": "on"
|
|
},
|
|
{
|
|
"color": "#ffffff"
|
|
},
|
|
{
|
|
"lightness": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"elementType": "labels.text.fill",
|
|
"stylers": [
|
|
{
|
|
"saturation": 36
|
|
},
|
|
{
|
|
"color": "#333333"
|
|
},
|
|
{
|
|
"lightness": 40
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"elementType": "labels.icon",
|
|
"stylers": [
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "transit",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#f2f2f2"
|
|
},
|
|
{
|
|
"lightness": 19
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "administrative",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"color": "#fefefe"
|
|
},
|
|
{
|
|
"lightness": 20
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "administrative",
|
|
"elementType": "geometry.stroke",
|
|
"stylers": [
|
|
{
|
|
"color": "#fefefe"
|
|
},
|
|
{
|
|
"lightness": 17
|
|
},
|
|
{
|
|
"weight": 1.2
|
|
}
|
|
]
|
|
}
|
|
]
|
|
|
|
geocoder = new google.maps.Geocoder();
|
|
var latlng = new google.maps.LatLng(-34.397, 150.644);
|
|
var mapProp = {
|
|
zoom:13,
|
|
mapTypeId:google.maps.MapTypeId.ROADMAP,
|
|
scrollwheel: false,
|
|
disableDefaultUI: true,
|
|
};
|
|
map = new google.maps.Map(document.getElementById('map'), mapProp);
|
|
var img = {
|
|
url: './img/location.png',
|
|
scaledSize : new google.maps.Size(40, 40),
|
|
};
|
|
geocoder.geocode( { 'address': address}, function(results, status) {
|
|
if (status == 'OK') {
|
|
map.setCenter(results[0].geometry.location);
|
|
var marker = new google.maps.Marker({
|
|
map: map,
|
|
position: results[0].geometry.location,
|
|
icon: img
|
|
});
|
|
}
|
|
else
|
|
alert("Please set a valid address");
|
|
});
|
|
map.set('styles', themes[theme]);
|
|
} |