googlemap.js
2.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', googlemapinit);
function googlemapinit() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(50.100499598, 14.255998976), // Prague
// How you would like to style the map.
styles: [{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{"color": "#444444"}]
}, {"featureType": "landscape", "elementType": "all", "stylers": [{"color": "#f2f2f2"}]}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{"visibility": "off"}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{"saturation": -100}, {"lightness": 45}]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{"visibility": "simplified"}]
}, {
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{"visibility": "off"}]
}, {
"featureType": "transit",
"elementType": "all",
"stylers": [{"visibility": "off"}]
}, {"featureType": "water", "elementType": "all", "stylers": [{"color": "#979797"}, {"visibility": "on"}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="google_map" seen below in the <body>
var mapElement = document.getElementById('google_map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
// var gimage = 'images/gmarker.png';
// var marker = new google.maps.Marker({
// position: new google.maps.LatLng(40.6700, -73.9400),
// map: map,
// icon: gimage,
// title: 'Google Map Title'
// });
}