Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | var MapsGoogle = function () { |
| 2 | |||
| 3 | var mapBasic = function () { |
||
| 4 | new GMaps({ |
||
| 5 | div: '#gmap_basic', |
||
| 6 | lat: -12.043333, |
||
| 7 | lng: -77.028333 |
||
| 8 | }); |
||
| 9 | } |
||
| 10 | |||
| 11 | var mapMarker = function () { |
||
| 12 | var map = new GMaps({ |
||
| 13 | div: '#gmap_marker', |
||
| 14 | lat: -51.38739, |
||
| 15 | lng: -6.187181, |
||
| 16 | }); |
||
| 17 | map.addMarker({ |
||
| 18 | lat: -51.38739, |
||
| 19 | lng: -6.187181, |
||
| 20 | title: 'Lima', |
||
| 21 | details: { |
||
| 22 | database_id: 42, |
||
| 23 | author: 'HPNeo' |
||
| 24 | }, |
||
| 25 | click: function (e) { |
||
| 26 | if (console.log) console.log(e); |
||
| 27 | alert('You clicked in this marker'); |
||
| 28 | } |
||
| 29 | }); |
||
| 30 | map.addMarker({ |
||
| 31 | lat: -12.042, |
||
| 32 | lng: -77.028333, |
||
| 33 | title: 'Marker with InfoWindow', |
||
| 34 | infoWindow: { |
||
| 35 | content: '<span style="color:#000">HTML Content!</span>' |
||
| 36 | } |
||
| 37 | }); |
||
| 38 | map.setZoom(5); |
||
| 39 | } |
||
| 40 | |||
| 41 | var mapPolylines = function () { |
||
| 42 | var map = new GMaps({ |
||
| 43 | div: '#gmap_polylines', |
||
| 44 | lat: -12.043333, |
||
| 45 | lng: -77.028333, |
||
| 46 | click: function (e) { |
||
| 47 | console.log(e); |
||
| 48 | } |
||
| 49 | }); |
||
| 50 | |||
| 51 | path = [ |
||
| 52 | [-12.044012922866312, -77.02470665341184], |
||
| 53 | [-12.05449279282314, -77.03024273281858], |
||
| 54 | [-12.055122327623378, -77.03039293652341], |
||
| 55 | [-12.075917129727586, -77.02764635449216], |
||
| 56 | [-12.07635776902266, -77.02792530422971], |
||
| 57 | [-12.076819390363665, -77.02893381481931], |
||
| 58 | [-12.088527520066453, -77.0241058385925], |
||
| 59 | [-12.090814532191756, -77.02271108990476] |
||
| 60 | ]; |
||
| 61 | |||
| 62 | map.drawPolyline({ |
||
| 63 | path: path, |
||
| 64 | strokeColor: '#131540', |
||
| 65 | strokeOpacity: 0.6, |
||
| 66 | strokeWeight: 6 |
||
| 67 | }); |
||
| 68 | } |
||
| 69 | |||
| 70 | var mapGeolocation = function () { |
||
| 71 | |||
| 72 | var map = new GMaps({ |
||
| 73 | div: '#gmap_geo', |
||
| 74 | lat: -12.043333, |
||
| 75 | lng: -77.028333 |
||
| 76 | }); |
||
| 77 | |||
| 78 | GMaps.geolocate({ |
||
| 79 | success: function (position) { |
||
| 80 | map.setCenter(position.coords.latitude, position.coords.longitude); |
||
| 81 | }, |
||
| 82 | error: function (error) { |
||
| 83 | alert('Geolocation failed: ' + error.message); |
||
| 84 | }, |
||
| 85 | not_supported: function () { |
||
| 86 | alert("Your browser does not support geolocation"); |
||
| 87 | }, |
||
| 88 | always: function () { |
||
| 89 | //alert("Geolocation Done!"); |
||
| 90 | } |
||
| 91 | }); |
||
| 92 | } |
||
| 93 | |||
| 94 | var mapGeocoding = function () { |
||
| 95 | |||
| 96 | var map = new GMaps({ |
||
| 97 | div: '#gmap_geocoding', |
||
| 98 | lat: -12.043333, |
||
| 99 | lng: -77.028333 |
||
| 100 | }); |
||
| 101 | |||
| 102 | var handleAction = function () { |
||
| 103 | var text = $.trim($('#gmap_geocoding_address').val()); |
||
| 104 | GMaps.geocode({ |
||
| 105 | address: text, |
||
| 106 | callback: function (results, status) { |
||
| 107 | if (status == 'OK') { |
||
| 108 | var latlng = results[0].geometry.location; |
||
| 109 | map.setCenter(latlng.lat(), latlng.lng()); |
||
| 110 | map.addMarker({ |
||
| 111 | lat: latlng.lat(), |
||
| 112 | lng: latlng.lng() |
||
| 113 | }); |
||
| 114 | Metronic.scrollTo($('#gmap_geocoding')); |
||
| 115 | } |
||
| 116 | } |
||
| 117 | }); |
||
| 118 | } |
||
| 119 | |||
| 120 | $('#gmap_geocoding_btn').click(function (e) { |
||
| 121 | e.preventDefault(); |
||
| 122 | handleAction(); |
||
| 123 | }); |
||
| 124 | |||
| 125 | $("#gmap_geocoding_address").keypress(function (e) { |
||
| 126 | var keycode = (e.keyCode ? e.keyCode : e.which); |
||
| 127 | if (keycode == '13') { |
||
| 128 | e.preventDefault(); |
||
| 129 | handleAction(); |
||
| 130 | } |
||
| 131 | }); |
||
| 132 | |||
| 133 | } |
||
| 134 | |||
| 135 | var mapPolygone = function () { |
||
| 136 | var map = new GMaps({ |
||
| 137 | div: '#gmap_polygons', |
||
| 138 | lat: -12.043333, |
||
| 139 | lng: -77.028333 |
||
| 140 | }); |
||
| 141 | |||
| 142 | var path = [ |
||
| 143 | [-12.040397656836609, -77.03373871559225], |
||
| 144 | [-12.040248585302038, -77.03993927003302], |
||
| 145 | [-12.050047116528843, -77.02448169303511], |
||
| 146 | [-12.044804866577001, -77.02154422636042] |
||
| 147 | ]; |
||
| 148 | |||
| 149 | var polygon = map.drawPolygon({ |
||
| 150 | paths: path, |
||
| 151 | strokeColor: '#BBD8E9', |
||
| 152 | strokeOpacity: 1, |
||
| 153 | strokeWeight: 3, |
||
| 154 | fillColor: '#BBD8E9', |
||
| 155 | fillOpacity: 0.6 |
||
| 156 | }); |
||
| 157 | } |
||
| 158 | |||
| 159 | var mapRoutes = function () { |
||
| 160 | |||
| 161 | var map = new GMaps({ |
||
| 162 | div: '#gmap_routes', |
||
| 163 | lat: -12.043333, |
||
| 164 | lng: -77.028333 |
||
| 165 | }); |
||
| 166 | $('#gmap_routes_start').click(function (e) { |
||
| 167 | e.preventDefault(); |
||
| 168 | Metronic.scrollTo($(this), 400); |
||
| 169 | map.travelRoute({ |
||
| 170 | origin: [-12.044012922866312, -77.02470665341184], |
||
| 171 | destination: [-12.090814532191756, -77.02271108990476], |
||
| 172 | travelMode: 'driving', |
||
| 173 | step: function (e) { |
||
| 174 | $('#gmap_routes_instructions').append('<li>' + e.instructions + '</li>'); |
||
| 175 | $('#gmap_routes_instructions li:eq(' + e.step_number + ')').delay(800 * e.step_number).fadeIn(500, function () { |
||
| 176 | map.setCenter(e.end_location.lat(), e.end_location.lng()); |
||
| 177 | map.drawPolyline({ |
||
| 178 | path: e.path, |
||
| 179 | strokeColor: '#131540', |
||
| 180 | strokeOpacity: 0.6, |
||
| 181 | strokeWeight: 6 |
||
| 182 | }); |
||
| 183 | }); |
||
| 184 | } |
||
| 185 | }); |
||
| 186 | }); |
||
| 187 | } |
||
| 188 | |||
| 189 | return { |
||
| 190 | //main function to initiate map samples |
||
| 191 | init: function () { |
||
| 192 | mapBasic(); |
||
| 193 | mapMarker(); |
||
| 194 | mapGeolocation(); |
||
| 195 | mapGeocoding(); |
||
| 196 | mapPolylines(); |
||
| 197 | mapPolygone(); |
||
| 198 | mapRoutes(); |
||
| 199 | } |
||
| 200 | |||
| 201 | }; |
||
| 202 | |||
| 203 | }(); |