FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
google-maps-javascript-api/javascript.js at master · imranhsayed/google-maps-javascript-api · GitHub
imranhsayed
/
google-maps-javascript-api
Public
Notifications
You must be signed in to change notification settings
Fork
27
Star
31
Code
Issues
0
Pull requests
0
Actions
Projects
Security and quality
0
Insights
Additional navigation options
Code
Issues
Pull requests
Actions
Projects
Security and quality
Insights
Expand file tree
Breadcrumbs
google-maps-javascript-api
/
javascript.js
Copy path
More file actions
More file actions
Latest commit
History
History
History
150 lines (125 loc) · 4.5 KB
Breadcrumbs
google-maps-javascript-api
/
javascript.js
Copy path
File metadata and controls
150 lines (125 loc) · 4.5 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
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
function
initialize
(
)
{
var
mapOptions
,
map
,
marker
,
searchBox
,
city
,
infoWindow
=
''
,
addressEl
=
document
.
querySelector
(
'#map-search'
)
,
latEl
=
document
.
querySelector
(
'.latitude'
)
,
longEl
=
document
.
querySelector
(
'.longitude'
)
,
element
=
document
.
getElementById
(
'map-canvas'
)
;
city
=
document
.
querySelector
(
'.reg-input-city'
)
;
mapOptions
=
{
// How far the maps zooms in.
zoom
:
8
,
// Current Lat and Long position of the pin/
center
:
new
google
.
maps
.
LatLng
(
18.5204
,
73.8567
)
,
// center : {
// lat: -34.397,
// lng: 150.644
// },
disableDefaultUI
:
false
,
// Disables the controls like zoom control on the map if set to true
scrollWheel
:
true
,
// If set to false disables the scrolling on the map.
draggable
:
true
,
// If set to false , you cannot move the map around.
// mapTypeId: google.maps.MapTypeId.HYBRID, // If set to HYBRID its between sat and ROADMAP, Can be set to SATELLITE as well.
// maxZoom: 11, // Wont allow you to zoom more than this
// minZoom: 9 // Wont allow you to go more up.
}
;
/**
* Creates the map using google function google.maps.Map() by passing the id of canvas and
* mapOptions object that we just created above as its parameters.
*
*/
// Create an object map with the constructor function Map()
map
=
new
google
.
maps
.
Map
(
element
,
mapOptions
)
;
// Till this like of code it loads up the map.
/**
* Creates the marker on the map
*
*/
marker
=
new
google
.
maps
.
Marker
(
{
position
:
mapOptions
.
center
,
map
:
map
,
// icon: 'http://pngimages.net/sites/default/files/google-maps-png-image-70164.png',
draggable
:
true
}
)
;
/**
* Creates a search box
*/
searchBox
=
new
google
.
maps
.
places
.
SearchBox
(
addressEl
)
;
/**
* When the place is changed on search box, it takes the marker to the searched location.
*/
google
.
maps
.
event
.
addListener
(
searchBox
,
'places_changed'
,
function
(
)
{
var
places
=
searchBox
.
getPlaces
(
)
,
bounds
=
new
google
.
maps
.
LatLngBounds
(
)
,
i
,
place
,
lat
,
long
,
resultArray
,
addresss
=
places
[
0
]
.
formatted_address
;
for
(
i
=
0
;
place
=
places
[
i
]
;
i
++
)
{
bounds
.
extend
(
place
.
geometry
.
location
)
;
marker
.
setPosition
(
place
.
geometry
.
location
)
;
// Set marker position new.
}
map
.
fitBounds
(
bounds
)
;
// Fit to the bound
map
.
setZoom
(
15
)
;
// This function sets the zoom to 15, meaning zooms to level 15.
// console.log( map.getZoom() );
lat
=
marker
.
getPosition
(
)
.
lat
(
)
;
long
=
marker
.
getPosition
(
)
.
lng
(
)
;
latEl
.
value
=
lat
;
longEl
.
value
=
long
;
resultArray
=
places
[
0
]
.
address_components
;
// Get the city and set the city input value to the one selected
for
(
var
i
=
0
;
i
<
resultArray
.
length
;
i
++
)
{
if
(
resultArray
[
i
]
.
types
[
0
]
&&
'administrative_area_level_2'
===
resultArray
[
i
]
.
types
[
0
]
)
{
citi
=
resultArray
[
i
]
.
long_name
;
city
.
value
=
citi
;
}
}
// Closes the previous info window if it already exists
if
(
infoWindow
)
{
infoWindow
.
close
(
)
;
}
/**
* Creates the info Window at the top of the marker
*/
infoWindow
=
new
google
.
maps
.
InfoWindow
(
{
content
:
addresss
}
)
;
infoWindow
.
open
(
map
,
marker
)
;
}
)
;
/**
* Finds the new position of the marker when the marker is dragged.
*/
google
.
maps
.
event
.
addListener
(
marker
,
"dragend"
,
function
(
event
)
{
var
lat
,
long
,
address
,
resultArray
,
citi
;
console
.
log
(
'i am dragged'
)
;
lat
=
marker
.
getPosition
(
)
.
lat
(
)
;
long
=
marker
.
getPosition
(
)
.
lng
(
)
;
var
geocoder
=
new
google
.
maps
.
Geocoder
(
)
;
geocoder
.
geocode
(
{
latLng
:
marker
.
getPosition
(
)
}
,
function
(
result
,
status
)
{
if
(
'OK'
===
status
)
{
// This line can also be written like if ( status == google.maps.GeocoderStatus.OK ) {
address
=
result
[
0
]
.
formatted_address
;
resultArray
=
result
[
0
]
.
address_components
;
// Get the city and set the city input value to the one selected
for
(
var
i
=
0
;
i
<
resultArray
.
length
;
i
++
)
{
if
(
resultArray
[
i
]
.
types
[
0
]
&&
'administrative_area_level_2'
===
resultArray
[
i
]
.
types
[
0
]
)
{
citi
=
resultArray
[
i
]
.
long_name
;
console
.
log
(
citi
)
;
city
.
value
=
citi
;
}
}
addressEl
.
value
=
address
;
latEl
.
value
=
lat
;
longEl
.
value
=
long
;
}
else
{
console
.
log
(
'Geocode was not successful for the following reason: '
+
status
)
;
}
// Closes the previous info window if it already exists
if
(
infoWindow
)
{
infoWindow
.
close
(
)
;
}
/**
* Creates the info Window at the top of the marker
*/
infoWindow
=
new
google
.
maps
.
InfoWindow
(
{
content
:
address
}
)
;
infoWindow
.
open
(
map
,
marker
)
;
}
)
;
}
)
;
}
Back
|
FazBrowse Home
|
New Git URL