-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (136 loc) · 5.38 KB
/
index.html
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>Happy Birthday Kanchu</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>
<center>
Happy Birthday Kanchu. <br> Zoom and click on any of the red marks
</center>
</h1>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 27.937446,lng:78.8357808},
mapTypeId: google.maps.MapTypeId.HYBRID
});
var haldwani = {lat:29.2183 ,lng:79.5130};
var kjo_home = { lat:29.195757, lng:79.525169};
var pithoragarh = {lat:29.5905559,lng:80.1958817};
var thal = {lat:29.8263983,lng:80.1390168};
var dehradun = {lat:30.320956, lng:78.052400};
var kichha = {lat:28.907057, lng:79.517328};
var jhansi = {lat:25.4412563,lng:78.4922478};
var shaldwani = "Happy birthday Kanchan from all your friends. We love you a lot. You have always been an unseparable part of our lives. Please don't forget us ever.";
var skjo_home = "Happy Birthday Kanchan. This place is never complete without you. Though we fight a lot but deep inside we love you too much.";
var spithoragarh = "Happy Birthday Kanchan. Your maternal home misses you a lot. Your presence lighten up the happiness in this place. Come soon";
var sthal = "Happy Birthday Kanchan. Your paternal home misses you a lot. Those beautiful few years you spent here are quite memorable for us. Vsit us soon.";
var sdehradun = "Happy Birthday Baby. I wish you have the best birthday till date because the coming ones will be even better. I love you. This is the only gift i can plan for you as of right now. Best of luck for your life.";
var skichha = "Happy Birthday daughter-in-law. We wish you to some to us soon and make this family complete. Love you dear.";
var sjhansi = "Happy Birthday Kanchan. Gullu is missing you a lot and she wishes you a special birthday. We all love you and hope of your best in your life.";
function createcontent(place, desc){
return '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+place+'</h1>'+
'<div id="bodyContent">'+
'<p>'+desc+'</p>'+
'</div>'+
'</div>';
}
var marker=[];
marker[1]= new google.maps.Marker({
position: haldwani,
map: map,
});
marker[2]= new google.maps.Marker({
position: kjo_home,
map: map,
});
marker[3]= new google.maps.Marker({
position: pithoragarh,
map: map,
});
marker[4]= new google.maps.Marker({
position: thal,
map: map,
});
marker[5]= new google.maps.Marker({
position: dehradun,
map: map,
});
marker[6]= new google.maps.Marker({
position: kichha,
map: map,
});
marker[7]= new google.maps.Marker({
position: jhansi,
map: map,
});
marker[1].addListener('click', function() {
var infowindow = new google.maps.InfoWindow({
content: createcontent("haldwani",shaldwani),
});
infowindow.open(map, marker[1]);
});
marker[2].addListener('click', function() {
var infowindow = new google.maps.InfoWindow({
content: createcontent("kjo_home",skjo_home),
});
infowindow.open(map, marker[2]);
});
marker[3].addListener('click', function() {
var infowindow = new google.maps.InfoWindow({
content: createcontent("pithoragarh",spithoragarh),
});
infowindow.open(map, marker[3]);
});
marker[4].addListener('click', function() {
var infowindow = new google.maps.InfoWindow({
content: createcontent("thal",sthal),
});
infowindow.open(map, marker[4]);
});
marker[5].addListener('click', function() {
var infowindow = new google.maps.InfoWindow({
content: createcontent("dehradun",sdehradun),
});
infowindow.open(map, marker[5]);
});
marker[6].addListener('click', function() {
var infowindow = new google.maps.InfoWindow({
content: createcontent("kichha",skichha),
});
infowindow.open(map, marker[6]);
});
marker[7].addListener('click', function() {
var infowindow = new google.maps.InfoWindow({
content: createcontent("jhansi",sjhansi),
});
infowindow.open(map, marker[7]);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4xKF60tgNOOUOO-G9dwsIUMoyFhXPgCo&callback=initMap">
</script>
</body>
</html>