1- $ ( function ( ) {
1+ $ ( ( ) => {
2+ const map = $ ( '#map' ) . dxMap ( {
3+ zoom : 14 ,
4+ height : 440 ,
5+ width : '100%' ,
6+ center : "Los Angeles, CA" ,
7+ provider : 'google' ,
8+ apiKey : {
9+ google : 'YOUR-API-KEY' ,
10+ } ,
11+ onReady : function ( s ) {
12+ var map = s . originalMap ;
213
3- $ ( "#map" ) . dxMap ( {
4- zoom : 3 ,
5- width : "100%" ,
6- height : "100%" ,
7- onReady : function ( s ) {
8- var map = s . originalMap ;
14+ var input = /** @type {!HTMLInputElement } */ (
15+ document . getElementById ( 'pac-input' ) ) ;
916
10- var input = /** @type {!HTMLInputElement } */ (
11- document . getElementById ( 'pac-input' ) ) ;
17+ var types = document . getElementById ( 'type-selector' ) ;
18+ map . controls [ google . maps . ControlPosition . TOP_LEFT ] . push ( input ) ;
19+ map . controls [ google . maps . ControlPosition . TOP_LEFT ] . push ( types ) ;
1220
13- var types = document . getElementById ( 'type-selector' ) ;
14- map . controls [ google . maps . ControlPosition . TOP_LEFT ] . push ( input ) ;
15- map . controls [ google . maps . ControlPosition . TOP_LEFT ] . push ( types ) ;
21+ var autocomplete = new google . maps . places . Autocomplete ( input ) ;
22+ autocomplete . bindTo ( 'bounds' , map ) ;
1623
17- var autocomplete = new google . maps . places . Autocomplete ( input ) ;
18- autocomplete . bindTo ( 'bounds' , map ) ;
24+ var infowindow = new google . maps . InfoWindow ( ) ;
25+ var marker = new google . maps . Marker ( {
26+ map : map ,
27+ anchorPoint : new google . maps . Point ( 0 , - 29 )
28+ } ) ;
1929
20- var infowindow = new google . maps . InfoWindow ( ) ;
21- var marker = new google . maps . Marker ( {
22- map : map ,
23- anchorPoint : new google . maps . Point ( 0 , - 29 )
24- } ) ;
30+ autocomplete . addListener ( 'place_changed' , function ( ) {
31+ infowindow . close ( ) ;
32+ marker . setVisible ( false ) ;
33+ var place = autocomplete . getPlace ( ) ;
34+ if ( ! place . geometry ) {
35+ window . alert ( "Autocomplete's returned place contains no geometry" ) ;
36+ return ;
37+ }
2538
26- autocomplete . addListener ( 'place_changed' , function ( ) {
27- infowindow . close ( ) ;
28- marker . setVisible ( false ) ;
29- var place = autocomplete . getPlace ( ) ;
30- if ( ! place . geometry ) {
31- window . alert ( "Autocomplete's returned place contains no geometry" ) ;
32- return ;
33- }
39+ // If the place has a geometry, then present it on a map.
40+ if ( place . geometry . viewport ) {
41+ map . fitBounds ( place . geometry . viewport ) ;
42+ } else {
43+ map . setCenter ( place . geometry . location ) ;
44+ map . setZoom ( 17 ) ; // Why 17? Because it looks good.
45+ }
46+ marker . setIcon ( /** @type {google.maps.Icon } */ ( {
47+ url : place . icon ,
48+ size : new google . maps . Size ( 71 , 71 ) ,
49+ origin : new google . maps . Point ( 0 , 0 ) ,
50+ anchor : new google . maps . Point ( 17 , 34 ) ,
51+ scaledSize : new google . maps . Size ( 35 , 35 )
52+ } ) ) ;
53+ marker . setPosition ( place . geometry . location ) ;
54+ marker . setVisible ( true ) ;
3455
35- // If the place has a geometry, then present it on a map.
36- if ( place . geometry . viewport ) {
37- map . fitBounds ( place . geometry . viewport ) ;
38- } else {
39- map . setCenter ( place . geometry . location ) ;
40- map . setZoom ( 17 ) ; // Why 17? Because it looks good.
41- }
42- marker . setIcon ( /** @type {google.maps.Icon } */ ( {
43- url : place . icon ,
44- size : new google . maps . Size ( 71 , 71 ) ,
45- origin : new google . maps . Point ( 0 , 0 ) ,
46- anchor : new google . maps . Point ( 17 , 34 ) ,
47- scaledSize : new google . maps . Size ( 35 , 35 )
48- } ) ) ;
49- marker . setPosition ( place . geometry . location ) ;
50- marker . setVisible ( true ) ;
56+ var address = '' ;
57+ if ( place . address_components ) {
58+ address = [
59+ ( place . address_components [ 0 ] && place . address_components [ 0 ] . short_name || '' ) ,
60+ ( place . address_components [ 1 ] && place . address_components [ 1 ] . short_name || '' ) ,
61+ ( place . address_components [ 2 ] && place . address_components [ 2 ] . short_name || '' )
62+ ] . join ( ' ' ) ;
63+ }
5164
52- var address = '' ;
53- if ( place . address_components ) {
54- address = [
55- ( place . address_components [ 0 ] && place . address_components [ 0 ] . short_name || '' ) ,
56- ( place . address_components [ 1 ] && place . address_components [ 1 ] . short_name || '' ) ,
57- ( place . address_components [ 2 ] && place . address_components [ 2 ] . short_name || '' )
58- ] . join ( ' ' ) ;
59- }
65+ infowindow . setContent ( '<div><strong>' + place . name + '</strong><br>' + address ) ;
66+ infowindow . open ( map , marker ) ;
67+ } ) ;
6068
61- infowindow . setContent ( '<div><strong>' + place . name + '</strong><br>' + address ) ;
62- infowindow . open ( map , marker ) ;
69+ // Sets a listener on a radio button to change the filter type on Places
70+ // Autocomplete.
71+ function setupClickListener ( id , types ) {
72+ var radioButton = document . getElementById ( id ) ;
73+ radioButton . addEventListener ( 'click' , function ( ) {
74+ autocomplete . setTypes ( types ) ;
6375 } ) ;
76+ }
6477
65- // Sets a listener on a radio button to change the filter type on Places
66- // Autocomplete.
67- function setupClickListener ( id , types ) {
68- var radioButton = document . getElementById ( id ) ;
69- radioButton . addEventListener ( 'click' , function ( ) {
70- autocomplete . setTypes ( types ) ;
71- } ) ;
72- }
78+ setupClickListener ( 'changetype-all' , [ ] ) ;
79+ setupClickListener ( 'changetype-address' , [ 'address' ] ) ;
80+ setupClickListener ( 'changetype-establishment' , [ 'establishment' ] ) ;
81+ setupClickListener ( 'changetype-geocode' , [ 'geocode' ] ) ;
7382
74- setupClickListener ( 'changetype-all' , [ ] ) ;
75- setupClickListener ( 'changetype-address' , [ 'address' ] ) ;
76- setupClickListener ( 'changetype-establishment' , [ 'establishment' ] ) ;
77- setupClickListener ( 'changetype-geocode' , [ 'geocode' ] ) ;
83+ }
7884
79- }
8085 } ) ;
81-
86+
8287} ) ;
0 commit comments