Pages UI
Search…
v5.0.1 - Pages HTML
UI Elements
Form Elements
Google Maps
This section will guide you through how to setup a basic google map and add overlay colors to it,For more advance options please refer the google map developer API for Web Google Map Developer API​
Setting up a map
Step one
Add the following google map api js, this is without private key.
1
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Copied!
Step Two
Create an Empty div with an ID
1
<div id="myMap"></div>
Copied!
Step Three
Initialize Google Map.
1
// When the window has finished loading create our google map below
2
google.maps.event.addDomListener(window, 'load', init);
3
​
4
var map;
5
var zoomLevel = 11;
6
​
7
function init() {
8
// Basic options for a simple Google Map
9
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
10
var mapOptions = {
11
// How zoomed in you want the map to start at (always required)
12
zoom: zoomLevel,
13
disableDefaultUI: true,
14
// The latitude and longitude to center the map (always required)
15
center: new google.maps.LatLng(40.6700, -73.9400), // New York
16
};
17
​
18
// Get the HTML DOM element that will contain your map
19
// We are using a div with id="map" seen below in the
20
var mapElement = document.getElementById('myMap');
21
​
22
// Create the Google Map using out element and options defined above
23
map = new google.maps.Map(mapElement, mapOptions);
24
}
Copied!
Map themes
Google Maps comes with styling option that you can change, add the following
styles attribute to mapOptions in the JS you created before1
styles: [{
2
featureType: 'water',
3
elementType: 'all',
4
stylers: [{
5
hue: '#e9ebed'
6
}, {
7
saturation: -78
8
}, {
9
lightness: 67
10
}, {
11
visibility: 'simplified'
12
}]
13
}, {
14
featureType: 'landscape',
15
elementType: 'all',
16
stylers: [{
17
hue: '#ffffff'
18
}, {
19
saturation: -100
20
}, {
21
lightness: 100
22
}, {
23
visibility: 'simplified'
24
}]
25
}, {
26
featureType: 'road',
27
elementType: 'geometry',
28
stylers: [{
29
hue: '#bbc0c4'
30
}, {
31
saturation: -93
32
}, {
33
lightness: 31
34
}, {
35
visibility: 'simplified'
36
}]
37
}, {
38
featureType: 'poi',
39
elementType: 'all',
40
stylers: [{
41
hue: '#ffffff'
42
}, {
43
saturation: -100
44
}, {
45
lightness: 100
46
}, {
47
visibility: 'off'
48
}]
49
}, {
50
featureType: 'road.local',
51
elementType: 'geometry',
52
stylers: [{
53
hue: '#e9ebed'
54
}, {
55
saturation: -90
56
}, {
57
lightness: -8
58
}, {
59
visibility: 'simplified'
60
}]
61
}, {
62
featureType: 'transit',
63
elementType: 'all',
64
stylers: [{
65
hue: '#e9ebed'
66
}, {
67
saturation: 10
68
}, {
69
lightness: 69
70
}, {
71
visibility: 'on'
72
}]
73
}, {
74
featureType: 'administrative.locality',
75
elementType: 'all',
76
stylers: [{
77
hue: '#2c2e33'
78
}, {
79
saturation: 7
80
}, {
81
lightness: 19
82
}, {
83
visibility: 'on'
84
}]
85
}, {
86
featureType: 'road',
87
elementType: 'labels',
88
stylers: [{
89
hue: '#bbc0c4'
90
}, {
91
saturation: -93
92
}, {
93
lightness: 31
94
}, {
95
visibility: 'on'
96
}]
97
}, {
98
featureType: 'road.arterial',
99
elementType: 'labels',
100
stylers: [{
101
hue: '#bbc0c4'
102
}, {
103
saturation: -93
104
}, {
105
lightness: -2
106
}, {
107
visibility: 'simplified'
108
}]
109
}]
Copied!
​
Last modified 4yr ago
Copy link