-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·182 lines (140 loc) · 6.14 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps</title>
<link rel="stylesheet" href="includes/css/main.css" type="text/css" />
<link rel="stylesheet" href="includes/css/jquery-ui-1.8rc3.custom.css" type="text/css" />
<!-- <script language="JavaScript" type="text/javascript" src="includes/js/map.js"></script> -->
<!--Script tag for google maps-->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCiRknQTJhy065CxLGgZDKGVvkjDdrmtJA&sensor=false">
</script>
<script type="text/javascript" src="includes/js/jquery-1.7.2.min.js"></script>
<!--Script tag for Clustering effect-->
<script type="text/javascript" src="includes/js/markerclusterer_packed.js"> </script>
<script type="text/javascript" src="includes/js/jquery-ui-1.8rc3.custom.min.js"> </script>
<!--Script tag for example json file-->
<script type="text/javascript" src="data9.json"> </script>
<!--Script tag for loading of the map page-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//function initializes automatically on loading the page
function initialize() {
var zoom = 3;
var latlng = new google.maps.LatLng(37.4419, -100.1419);
var location = "Showing default location for map.";
// If ClientLocation was filled in by the loader, use that info instead
if (google.loader.ClientLocation) {
zoom = 13;
latlng = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
location = "Showing IP-based location: <b>" + getFormattedLocation() + "</b>";
}
//variable to set the map display
var myOptions = {
zoom: zoom,
streetViewControl:false,
panControl:false,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//map object creation
map = new google.maps.Map(document.getElementById("map"),myOptions);
//variable for displaying the custom icons based on the state in the json file
var customIcons = {
CA: {
icon: 'includes/images/1.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
MA: {
icon: 'includes/images/2.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
TX: {
icon: 'includes/images/brand.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
var markers = [];
//loop for the json file data to be marked in the positions that is included in the script tag
for (var i = 0, length = data.photos.length; i < length; i++) {
var dataPhoto = data.photos[i];//Assigning the json data(Location)
var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude); // Providing latitude and longitude for that particular json data
var state = dataPhoto.state_province;//Assigning state whether it is a branded ,promoted etc
var icon = customIcons[state] || {}; // calling the custom Icons variable based on the state
//var contentString = dataPhoto.title ; //Assigning the title to be displayed on clicking the icon
var contentString = [
'<div id="tabs">',
'<ul>',
'<li><a href="#tab-1"><span>Store info</span></a></li>',
'<li><a href="#tab-2"><span><img src="includes/images/demo.png"></span></a></li>',
'</ul>',
'<div id="tab-1">',
dataPhoto.title ,
'</div>',
'<div id="tab-2">',
'<p>Call Now:xxx.xxx.xxxx</p><br>',
'<p>Setup appointment:</p>',
'<p>[name]</p>',
'<p>[email]</p>',
'<p>[date][time]</p>',
'<p>[phone]</p>',
'<p>[text box(2lines):what are you looking for?]</p>',
'</div>',
'</div>'
].join('');
//marker variable for displaying the locations in the place of markers
var marker = new google.maps.Marker({
position: latLng,
map: map,
//zIndex: Math.round(latLng.lat()*-100000)<<5,
icon: icon.icon,
shadow: icon.shadow
});
//Calling function for displaying of popup (content) on clicking the marker
attachIWindow(contentString, marker);
markers.push(marker);
} //end of for loop
var markerCluster = new MarkerClusterer(map, markers);
} // end of initialize function
//Execute the initialize() function that constructs the Map object on window load
google.maps.event.addDomListener(window, 'load', initialize);
//function for calling the location on loading the page
function getFormattedLocation() {
if (google.loader.ClientLocation.address.country_code == "US" &&
google.loader.ClientLocation.address.region) {
return google.loader.ClientLocation.address.city + ", "
+ google.loader.ClientLocation.address.region.toUpperCase();
} else {
return google.loader.ClientLocation.address.city + ", "
+ google.loader.ClientLocation.address.country_code;
}
}
//function for calling information window on clicking the marker
function attachIWindow(content, marker){
//object creation for the information window
var infowindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(infowindow, 'domready', function() {
$("#tabs").tabs();
});
//eventlistner for opening of information window on clicking the marker
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
}
</script>
</head>
<body>
<div id="map-container">
<div style="height:8%;"></div>
<div id="map"></div>
</div>
</div>
</body>
</html>