|
| 1 | +/** |
| 2 | + * The initial Map center. |
| 3 | + * Expects a latitude and a longitude value. |
| 4 | + */ |
| 5 | +var mapCenter = [11.313430592259937, 21.402397366699233]; |
| 6 | + |
| 7 | +/** |
| 8 | + * The initial Map zoom level. |
| 9 | + */ |
| 10 | +var mapZoom = 2; |
| 11 | + |
| 12 | +/** |
| 13 | + * Data for the markers consisting of a name, a latitude, longitude and address |
| 14 | + */ |
| 15 | +var locations = []; |
| 16 | + |
| 17 | +/** |
| 18 | + * color of the marker on the map |
| 19 | + * the color is changeable, to change the color of the marker please add your icons to the images folder and replace name instead of default |
| 20 | + */ |
| 21 | +var markerColor = 'default'; |
| 22 | + |
| 23 | +/** |
| 24 | + * Line Color |
| 25 | + */ |
| 26 | +var polyLineColor = '#FFCC00' |
| 27 | + |
| 28 | + |
| 29 | + |
| 30 | + |
| 31 | +function initialize() { |
| 32 | + |
| 33 | + var config = { |
| 34 | + zoom : mapZoom, |
| 35 | + center : new google.maps.LatLng(mapCenter[0], mapCenter[1]) |
| 36 | + }; |
| 37 | + var googleMap = new google.maps.Map(document.getElementById("map_canvas"), config); |
| 38 | + |
| 39 | + var input = /** @type {HTMLInputElement} */( |
| 40 | + document.getElementById('pac-input')); |
| 41 | + |
| 42 | + var types = document.getElementById('type-selector'); |
| 43 | + googleMap.controls[google.maps.ControlPosition.TOP_LEFT].push(input); |
| 44 | + googleMap.controls[google.maps.ControlPosition.TOP_LEFT].push(types); |
| 45 | + |
| 46 | + var autocomplete = new google.maps.places.Autocomplete(input); |
| 47 | + |
| 48 | + google.maps.event.addListener(autocomplete, 'place_changed', function() { |
| 49 | + |
| 50 | + var place = autocomplete.getPlace(); |
| 51 | + if (!place.geometry) { |
| 52 | + return; |
| 53 | + } |
| 54 | + |
| 55 | + var address = ''; |
| 56 | + if (place.address_components) { |
| 57 | + place.address = [ |
| 58 | + (place.address_components[1] && place.address_components[1].long_name || ''), |
| 59 | + (place.address_components[2] && place.address_components[2].long_name || '') |
| 60 | + ].join(' '); |
| 61 | + } |
| 62 | + var loc = place.geometry.location; |
| 63 | + |
| 64 | + if(locations.length>0){ |
| 65 | + locations.push([place.name, loc.k, loc.D, place.address]); |
| 66 | + console.log(locations); |
| 67 | + makeMap(googleMap,place); |
| 68 | + }else{ |
| 69 | + |
| 70 | + var marker = new google.maps.Marker({ |
| 71 | + position : place.geometry.location, |
| 72 | + shadow : shadowImage(), |
| 73 | + icon : markerImage(0, locations.length), |
| 74 | + shape : markerShape(), |
| 75 | + zIndex : 0, |
| 76 | + map: googleMap |
| 77 | + }); |
| 78 | + |
| 79 | + if (place.geometry.viewport) { |
| 80 | + googleMap.fitBounds(place.geometry.viewport); |
| 81 | + } else { |
| 82 | + googleMap.setCenter(place.geometry.location); |
| 83 | + googleMap.setZoom(17); |
| 84 | + } |
| 85 | + marker.setMap(googleMap); |
| 86 | + marker.setVisible(true); |
| 87 | + |
| 88 | + locations.push([place.name, loc.k, loc.D, address]); |
| 89 | + } |
| 90 | + |
| 91 | + }); |
| 92 | + |
| 93 | + |
| 94 | + |
| 95 | + // Sets a listener on a radio button to change the filter type on Places Autocomplete. |
| 96 | + function setupClickListener(id, types) { |
| 97 | + var radioButton = document.getElementById(id); |
| 98 | + google.maps.event.addDomListener(radioButton, 'click', function() { |
| 99 | + autocomplete.setTypes(types); |
| 100 | + }); |
| 101 | + } |
| 102 | + |
| 103 | + setupClickListener('changetype-all', []); |
| 104 | + setupClickListener('changetype-address', ['address']); |
| 105 | + setupClickListener('changetype-establishment', ['establishment']); |
| 106 | + setupClickListener('changetype-geocode', ['geocode']); |
| 107 | + |
| 108 | +} |
| 109 | + |
| 110 | + |
| 111 | +function makeMap(h,place){ |
| 112 | + |
| 113 | + var lt = new google.maps.LatLngBounds(); |
| 114 | + |
| 115 | + for (var d = 0; d < locations.length; d++) { |
| 116 | + var c = locations[d]; |
| 117 | + var g = new google.maps.LatLng(c[1], c[2]); |
| 118 | + var a = new google.maps.Marker({ |
| 119 | + position : g, |
| 120 | + shadow : shadowImage(), |
| 121 | + icon : markerImage(d, locations.length), |
| 122 | + shape : markerShape(), |
| 123 | + title : c[0], |
| 124 | + zIndex : d, |
| 125 | + map: h |
| 126 | + }); |
| 127 | + a.setMap(h); |
| 128 | + } |
| 129 | + |
| 130 | + setPolyline(h, locations); |
| 131 | + |
| 132 | + for (var l = 0; l < locations.length; l++) { |
| 133 | + var cl = locations[l]; |
| 134 | + var gl = new google.maps.LatLng(cl[1], cl[2]); |
| 135 | + lt.extend(gl); |
| 136 | + } |
| 137 | + h.fitBounds(lt); |
| 138 | + |
| 139 | +} |
| 140 | + |
| 141 | + |
| 142 | +function setPolyline(f, a) { |
| 143 | + var e = new Array(); |
| 144 | + for (var d = 0; d < a.length; d++) { |
| 145 | + var c = a[d]; |
| 146 | + e.push(new google.maps.LatLng(c[1], c[2])) |
| 147 | + } |
| 148 | + |
| 149 | + var b = new google.maps.Polyline({ |
| 150 | + path : e, |
| 151 | + strokeColor : polyLineColor, |
| 152 | + strokeOpacity : 1, |
| 153 | + strokeWeight : 2, |
| 154 | + geodesic : true |
| 155 | + }); |
| 156 | + b.setMap(f) |
| 157 | +} |
| 158 | + |
| 159 | + |
| 160 | +function markerImage(b, a) { |
| 161 | + var c = "stop"; |
| 162 | + if (0 == b) { |
| 163 | + c = "start" |
| 164 | + } else { |
| 165 | + if (b == (a-1)) { |
| 166 | + c = "end" |
| 167 | + } |
| 168 | + } |
| 169 | + |
| 170 | + return new google.maps.MarkerImage("images/" + c + "_marker_" + markerColor + ".png", new google.maps.Size(19, 37), new google.maps.Point(0, 0), new google.maps.Point(9, 37)) |
| 171 | + |
| 172 | +} |
| 173 | + |
| 174 | + |
| 175 | +function shadowImage() { |
| 176 | + return new google.maps.MarkerImage("images/marker_shadow.png", new google.maps.Size(37, 34), new google.maps.Point(0, 0), new google.maps.Point(9, 34)) |
| 177 | +} |
| 178 | + |
| 179 | + |
| 180 | +function markerShape() { |
| 181 | + var a = { |
| 182 | + coord : [1, 1, 1, 20, 18, 20, 18, 1], |
| 183 | + type : "poly" |
| 184 | + } |
| 185 | +} |
0 commit comments