1/** 2 * Created by mhirdes on 27.11.13. 3 */ 4(function ($) { 5 var GoMapsExt = window.GoMapsExt = window.GoMapsExt || {}; 6 7 GoMapsExt.Data = { 8 mapSettings: { 9 markerSearch: null, 10 defaultZoom: null, 11 doubleClickZoom: null, 12 scrollZoom: null, 13 panControl: null, 14 scaleControl: null, 15 streetviewControl: null, 16 zoomControl: null, 17 zoomControlType: null, 18 defaultType: null, 19 mapTypeControl: null, 20 mapTypes: null, 21 showRoute: null, 22 calcRoute: null, 23 styledMapName: null, 24 styledMapCode: null, 25 tooltipTitle: null, 26 kmlUrl: null, 27 kmlLocal: null, 28 showForm: null, 29 gestureHandling: null 30 }, 31 zoomTypes: [], 32 defaultMapTypes: [], 33 addresses: [] 34 }; 35 36 /** 37 * Controller for Map functionality 38 * 39 * @param {HTMLElement} element 40 * @param {GoMapsExt.Data} gme 41 * @constructor 42 */ 43 GoMapsExt.Controller = function (element, gme) { 44 var $element = this.element = $(element); 45 this.gme = gme; 46 this.data = gme; 47 this.route = []; 48 this.infoWindow = new google.maps.InfoWindow(); 49 this.bounds = new google.maps.LatLngBounds(); 50 this.markers = []; 51 52 this.map = new google.maps.Map(document.getElementById(gme.mapSettings.id), this._createMapOptions()); 53 54 this._initializeCss(); 55 this._initializeData(); 56 this._initializeKmlImport(); 57 58 this._initializeSearch(); 59 this._initializeBackendAddresses(); 60 this._initializeRoute(); 61 this._initializeResizeListener(); 62 this._initializeCheckboxListener(); 63 this._initializeAddressListener(); 64 65 // open info window 66 window.setTimeout(function () { 67 $element.trigger("openinfo"); 68 }, 2000); 69 70 this.setCategoriesFromRequest(); 71 this.focusAddressFromRequest(); 72 73 // trigger mapcreated on map 74 $element.trigger("mapcreated"); 75 76 this.refreshMap($element, gme); 77 }; 78 79 GoMapsExt.Controller.prototype = { 80 // categories checkboxes 81 setCategories: function (selectedCats) { 82 var $element = this.element; 83 84 $.each(this.markers, function (key, marker) { 85 marker.setVisible(false); 86 $.each(marker.categories, function (keyM, category) { 87 if ($.inArray(category, selectedCats) != -1) { 88 marker.setVisible(true); 89 return true; 90 } 91 }); 92 }); 93 if ($element.markerCluster) { 94 $element.markerCluster.repaint(); 95 } 96 }, 97 98 setCategoriesFromRequest: function () { 99 // set categories 100 var getCats = this.getURLParameter('tx_gomapsext_show\\[cat\\]'); 101 if (getCats) { 102 getCats = getCats.split(","); 103 this.setCategories(getCats); 104 $('.js-gme-cat').each(function (key, checkbox) { 105 if ($.inArray($(checkbox).val(), getCats) != -1) { 106 $(checkbox).attr('checked', true); 107 return true; 108 } 109 }); 110 } 111 }, 112 113 focusAddressFromRequest: function () { 114 var getAddress = this.getURLParameter('tx_gomapsext_show\\[address\\]'), 115 $element = this.element, 116 gme = this.data; 117 if (getAddress) { 118 this.focusAddress(getAddress, $element, gme); 119 } 120 }, 121 122 // add a point 123 addMapPoint: function (pointDescription, Route, $element, infoWindow, gme) { 124 var _this = this, 125 latitude = pointDescription.latitude, 126 longitude = pointDescription.longitude; 127 128 Route.push(pointDescription.address); 129 130 if (Math.round(latitude) == 0 && Math.round(longitude) == 0) { 131 $element.data("geocoder").geocode({"address": pointDescription.address}, function (point, status) { 132 latitude = point[0].geometry.location.lat(); 133 longitude = point[0].geometry.location.lng(); 134 var position = new google.maps.LatLng(latitude, longitude); 135 _this.setMapPoint(pointDescription, Route, $element, infoWindow, position, gme); 136 }); 137 return; 138 } 139 140 var position = new google.maps.LatLng(latitude, longitude); 141 142 this.setMapPoint(pointDescription, Route, $element, infoWindow, position, gme); 143 }, 144 145 focusAddress: function (addressUid, $element, gme) { 146 var _this = this; 147 $.each(this.markers, function (key, marker) { 148 if (marker.uid == addressUid) { 149 $element.data("center", marker.position); 150 if (marker.infoWindow) { 151 marker.infoWindow.setContent(marker.infoWindowContent); 152 marker.infoWindow.open(_this.map, marker); 153 } 154 _this.refreshMap($element, gme); 155 return true; 156 } 157 }); 158 if ($element.markerCluster) { 159 $element.markerCluster.repaint(); 160 } 161 }, 162 163 /** 164 * decode URL Parameter go_maps_ext[cat] 165 * 166 * @param name 167 * @returns {string|null} 168 */ 169 getURLParameter: function (name) { 170 var uri = decodeURI(location.search); 171 return (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(uri) || ["", ""])[1].replace(/\+/g, '%20') || null; 172 }, 173 174 /** 175 * get the travel mode 176 * 177 * @param $travelMode 178 * @returns {string} 179 */ 180 getTravelMode: function ($travelMode) { 181 var travelMode = google.maps.TravelMode.DRIVING; 182 switch ($travelMode) { 183 case 2: 184 travelMode = google.maps.TravelMode.BICYCLING; 185 break; 186 case 3: 187 travelMode = google.maps.TravelMode.TRANSIT; 188 break; 189 case 4: 190 travelMode = google.maps.TravelMode.WALKING; 191 break; 192 } 193 return travelMode; 194 }, 195 196 /** 197 * get the unit system 198 * 199 * @param $unitSystem 200 * @returns {number} 201 */ 202 getUnitSystem: function ($unitSystem) { 203 var unitSystem = 0; 204 switch ($unitSystem) { 205 case 2: 206 unitSystem = google.maps.UnitSystem.METRIC; 207 break; 208 case 3: 209 unitSystem = google.maps.UnitSystem.IMPERIAL; 210 break; 211 } 212 return unitSystem; 213 }, 214 215 /** 216 * insert the point on the map 217 * 218 * @param pointDescription 219 * @param Route 220 * @param $element 221 * @param infoWindow 222 * @param position 223 * @param gme 224 */ 225 setMapPoint: function (pointDescription, Route, $element, infoWindow, position, gme) { 226 var _map = this.map, 227 markerOptions = { 228 position: position, 229 map: _map, 230 title: pointDescription.title 231 }; 232 if (pointDescription.marker != "") { 233 if (pointDescription.imageSize == 1) { 234 var Icon = { 235 url: pointDescription.marker, 236 size: new google.maps.Size(pointDescription.imageWidth * 2, pointDescription.imageHeight * 2), 237 scaledSize: new google.maps.Size(pointDescription.imageWidth, pointDescription.imageHeight), 238 origin: new google.maps.Point(0, 0), 239 anchor: new google.maps.Point(pointDescription.imageWidth / 2, pointDescription.imageHeight) 240 }; 241 242 var Shape = { 243 type: 'rect', 244 coord: [0, 0, pointDescription.imageWidth, pointDescription.imageHeight] 245 }; 246 247 var anchorPoint = new google.maps.Point(0, -pointDescription.imageHeight); 248 249 $.extend(markerOptions, {icon: Icon, shape: Shape, anchorPoint: anchorPoint}); 250 } else { 251 $.extend(markerOptions, {icon: pointDescription.marker}); 252 } 253 254 } 255 var marker = new google.maps.Marker(markerOptions); 256 257 if (gme.mapSettings.markerCluster == 1) { 258 google.maps.event.addListener(marker, 'visible_changed', function () { 259 if (marker.getVisible()) { 260 $element.markerCluster.addMarker(marker, true); 261 } else { 262 $element.markerCluster.removeMarker(marker, true); 263 } 264 }); 265 } 266 267 if (pointDescription.infoWindowContent != "" || pointDescription.infoWindowLink > 0) { 268 var infoWindowContent = pointDescription.infoWindowContent; 269 if (pointDescription.infoWindowLink > 0) { 270 var daddr = (pointDescription.infoWindowLink == 2) ? pointDescription.latitude + ", " + pointDescription.longitude : pointDescription.address;
271 daddr += " (" + pointDescription.title + ")"; 272 infoWindowContent += '<p class="routeLink"><a href="//maps.google.com/maps?daddr=' + encodeURI(daddr) + '" target="_blank">' + gme.ll.infoWindowLinkText + '<\/a><\/p>'; 273 } 274 infoWindowContent = '<div class="gme-info-window">' + infoWindowContent + '</div>'; 275 276 if (pointDescription.openByClick) { 277 google.maps.event.addListener(marker, "click", function () { 278 if (!infoWindow.getMap() || gme.infoWindow != this.getPosition()) { 279 infoWindow.setContent(infoWindowContent); 280 infoWindow.open(_map, this); 281 gme.infoWindow = this.getPosition(); 282 } 283 }); 284 } else { 285 google.maps.event.addListener(marker, "mouseover", function () { 286 if (!infoWindow.getMap() || gme.infoWindow != this.getPosition()) { 287 infoWindow.setContent(infoWindowContent); 288 infoWindow.open(_map, this); 289 gme.infoWindow = this.getPosition(); 290 } 291 }); 292 } 293 if (!pointDescription.closeByClick) { 294 google.maps.event.addListener(marker, "mouseout", function () { 295 infoWindow.close(); 296 }); 297 } 298 if (pointDescription.opened) { 299 300 $element.off("openinfo").on("openinfo", function () { 301 infoWindow.setContent(infoWindowContent); 302 infoWindow.open(_map, marker); 303 }); 304 gme.infoWindow = marker.getPosition(); 305 } 306 307 infoWindow.setContent(infoWindowContent); 308 marker.infoWindowContent = infoWindowContent; 309 marker.infoWindow = infoWindow; 310 } 311 marker.categories = pointDescription.categories.split(","); 312 marker.uid = pointDescription.uid; 313 this.markers.push(marker); 314 this.bounds.extend(position); 315 }, 316 317 resize: function() { 318 var _map = this.map, 319 gme = this.data; 320 321 google.maps.event.trigger(_map, 'resize'); 322 _map.fitBounds(this.bounds); 323 if (gme.mapSettings.zoom > 0) { 324 _map.setZoom(gme.mapSettings.zoom); 325 } 326 this.refreshMap(this.element, gme); 327 google.maps.event.trigger(this.infoWindow, 'content_changed'); 328 }, 329 330 /** 331 * Set zoom, center and cluster 332 * 333 * @param $element 334 * @param gme 335 */ 336 refreshMap: function ($element, gme) { 337 var _map = this.map; 338 if (gme.mapSettings.zoom > 0 || gme.addresses.length == 1) { 339 google.maps.event.addListener(_map, "zoom_changed", function () { 340 var zoomChangeBoundsListener = google.maps.event.addListener(_map, "bounds_changed", function () { 341 if (this.initZoom == 1) { 342 this.setZoom((gme.mapSettings.zoom > 0) ? gme.mapSettings.zoom : gme.mapSettings.defaultZoom); 343 this.initZoom = 0; 344 } 345 google.maps.event.removeListener(zoomChangeBoundsListener); 346 }); 347 }); 348 _map.initZoom = 1; 349 } 350 351 if ($element.data("center")) { 352 _map.setCenter($element.data("center")); 353 } else { 354 _map.fitBounds(this.bounds); 355 } 356 357 this.refreshCluster($element, gme); 358 }, 359 360 /** 361 * refresh the cluster 362 * 363 * @param $element 364 * @param gme 365 */ 366 refreshCluster: function ($element, gme) { 367 if (gme.mapSettings.markerCluster == 1) { 368 if ($element.markerCluster != null) { 369 $element.markerCluster.clearMarkers(); 370 } 371 $element.markerCluster = new MarkerClusterer(this.map, this.markers, { 372 imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m', 373 styles: gme.mapSettings.markerClusterStyle, 374 maxZoom: gme.mapSettings.markerClusterZoom, 375 gridSize: gme.mapSettings.markerClusterSize 376 }); 377 } 378 }, 379 380 _initializeCss: function () { 381 this.element 382 .css("width", this.gme.mapSettings.width) 383 .css("height", this.gme.mapSettings.height); 384 }, 385 _initializeData: function () { 386 var $element = this.element, 387 gme = this.data, 388 _map = this.map; 389 390 $element.data("map", _map); 391 392 // styled map 393 if (gme.mapSettings.styledMapName) { 394 var myStyle = gme.mapSettings.styledMapCode, 395 styledMapOptions = { 396 name: gme.mapSettings.styledMapName, 397 alt: gme.mapSettings.tooltipTitle 398 }, 399 myMapType = new google.maps.StyledMapType( 400 myStyle, 401 styledMapOptions 402 ); 403 _map.mapTypes.set(gme.mapSettings.styledMapName, myMapType); 404 } 405 406 if (gme.mapSettings.defaultType == 3 && gme.mapSettings.styledMapName) { 407 _map.setMapTypeId(gme.mapSettings.styledMapName); 408 } 409 410 }, 411 412 _createMapOptions: function () { 413 var gme = this.gme; 414 return { 415 zoom: gme.mapSettings.defaultZoom, 416 minZoom: gme.mapSettings.minZoom, 417 maxZoom: gme.mapSettings.maxZoom, 418 center: new google.maps.LatLng(0, 0), 419 draggable: gme.mapSettings.draggable, 420 disableDoubleClickZoom: gme.mapSettings.doubleClickZoom, 421 scrollwheel: gme.mapSettings.scrollZoom, 422 panControl: gme.mapSettings.panControl, 423 scaleControl: gme.mapSettings.scaleControl, 424 streetViewControl: gme.mapSettings.streetviewControl, 425 zoomControl: gme.mapSettings.zoomControl, 426 zoomControlOptions: {style: gme.zoomTypes[gme.mapSettings.zoomControlType]}, 427 mapTypeId: gme.defaultMapTypes[gme.mapSettings.defaultType], 428 mapTypeControl: gme.mapSettings.mapTypeControl, 429 mapTypeControlOptions: {mapTypeIds: gme.mapSettings.mapTypes}, 430 gestureHandling: 'cooperative' 431 }; 432 }, 433 434 _initializeKmlImport: function () { 435 var _this = this, 436 _map = this.map, 437 gme = this.data, 438 Route = this.route, 439 $element = this.element; 440 441 // KML import 442 if (gme.mapSettings.kmlUrl != '' && gme.mapSettings.kmlLocal == 0) { 443 var kmlLayer = new google.maps.KmlLayer(gme.mapSettings.kmlUrl, {preserveViewport: gme.mapSettings.kmlPreserveViewport}); 444 kmlLayer.setMap(_map); 445 } 446 447 // KML import local 448 if (gme.mapSettings.kmlUrl != '' && gme.mapSettings.kmlLocal == 1) { 449 $.get(gme.mapSettings.kmlUrl, function (data) { 450 451 //loop through placemarks tags 452 $(data).find("Placemark").each(function () { 453 //get coordinates and place name 454 var coords = $(this).find("coordinates").text(), 455 place = $(this).find("name").text(), 456 description = $(this).find("description").text(), 457 c = coords.split(","), 458 address = { 459 title: place, 460 latitude: c[1], 461 longitude: c[0], 462 address: place, 463 marker: '', 464 imageSize: 0, 465 imageWidth: 0, 466 imageHeight: 0, 467 infoWindowContent: description, 468 infoWindowLink: 0,
469 openByClick: 1, 470 closeByClick: 1, 471 opened: 0, 472 categories: '' 473 }; 474 _this.addMapPoint(address, Route, $element, infoWindow, gme); 475 gme.addresses.push(address); 476 }); 477 }); 478 } 479 }, 480 481 _initializeSearch: function () { 482 var _this = this, 483 gme = this.data, 484 $element = this.element; 485 486 // Search 487 if (gme.mapSettings.markerSearch == 1) { 488 var $myForm = $('#' + gme.mapSettings.id + '-search'), 489 searchIn = $myForm.find('.js-gme-sword'); 490 491 $myForm.find('.js-gme-error').hide(); 492 493 $myForm.submit(function () { 494 var submitValue = $(searchIn).val().toLowerCase(); 495 var notFound = true; 496 $.each(gme.addresses, function (i, address) { 497 $.each(address, function (index, val) { 498 if (typeof val == "string" && (index == "title" || index == "infoWindowContent") && submitValue != "") { 499 if (val.toLowerCase().indexOf(submitValue) != -1) { 500 _this.focusAddress(_this.markers[i].uid, $element, gme); 501 notFound = false; 502 } 503 } 504 }); 505 }); 506 $myForm.find('.js-gme-error').toggle(notFound); 507 return false; 508 }); 509 } 510 }, 511 512 _initializeBackendAddresses: function () { 513 var _this = this, 514 gme = this.data, 515 $element = this.element, 516 Route = this.route, 517 infoWindow = this.infoWindow; 518 519 // Add backend addresses 520 if (gme.mapSettings.showRoute == 0) { 521 $element.data("geocoder", new google.maps.Geocoder()); 522 if ($element.data("geocoder")) { 523 $.each(gme.addresses, function (index, address) { 524 _this.addMapPoint(address, Route, $element, infoWindow, gme); 525 }); 526 527 } 528 } 529 }, 530 531 _initializeRoute: function () { 532 var _this = this, 533 _map = this.map, 534 gme = this.data, 535 $element = this.element; 536 537 // init Route function 538 if (gme.mapSettings.showRoute == 1 || gme.mapSettings.calcRoute == 1) { 539 var panelHtml = $('<div id="dPanel-' + gme.mapSettings.id + '"><\/div>'), 540 directionsService = new google.maps.DirectionsService(), 541 directionsDisplay = new google.maps.DirectionsRenderer(); 542 543 panelHtml.insertAfter($element); 544 545 var renderRoute = function ($start, $end, $travelMode, $unitSystem) { 546 var unitSystem = _this.getUnitSystem($unitSystem), 547 request = { 548 origin: $start, 549 destination: $end, 550 travelMode: _this.getTravelMode($travelMode) 551 }; 552 553 directionsDisplay.setMap(_map); 554 directionsDisplay.setPanel(document.getElementById("dPanel-" + gme.mapSettings.id)); 555 556 if (unitSystem != 0) { 557 request.unitSystem = unitSystem; 558 } 559 560 directionsService.route(request, function (response, status) { 561 if (status == google.maps.DirectionsStatus.OK) { 562 directionsDisplay.setDirections(response); 563 } else { 564 alert(gme.ll.alert); 565 } 566 }); 567 }; 568 } 569 570 // show route from backend 571 if (gme.mapSettings.showRoute == 1) { 572 renderRoute(gme.addresses[0].address, gme.addresses[1].address, gme.mapSettings.travelMode, gme.mapSettings.unitSystem); 573 } 574 575 // show route from frontend 576 if (gme.mapSettings.showForm == 1) { 577 var $mapForm = $('#' + gme.mapSettings.id + '-form'); 578 579 $mapForm.submit(function () { 580 var formStartAddress = $mapForm.find('.js-gme-saddress').val(), 581 endAddressIndex = $mapForm.find('.js-gme-eaddress option:selected').val(), 582 formEndAddress = endAddressIndex ? 583 gme.addresses[parseInt(endAddressIndex)].address : 584 gme.addresses[0].address, 585 formTravelMode = $mapForm.find('.js-gme-travelmode').val(), 586 formUnitSystem = $mapForm.find('.js-gme-unitsystem').val(); 587 588 if (formStartAddress == null) { 589 formStartAddress = gme.addresses[0].address; 590 formEndAddress = gme.addresses[1].address; 591 } 592 593 if (formTravelMode == null) { 594 formTravelMode = gme.mapSettings.travelMode; 595 } else { 596 formTravelMode = parseInt(formTravelMode); 597 } 598 if (formUnitSystem == null) { 599 formUnitSystem = gme.mapSettings.unitSystem; 600 } else { 601 formUnitSystem = parseInt(formUnitSystem); 602 } 603 604 renderRoute(formStartAddress, formEndAddress, formTravelMode, formUnitSystem); 605 return false; 606 }); 607 } 608 }, 609 610 _initializeResizeListener: function () { 611 var _this = this; 612 613 // eventHandler resize can be used 614 this.element.bind('mapresize', function () { 615 _this.resize(); 616 }); 617 }, 618 619 _initializeCheckboxListener: function () { 620 var _this = this; 621 622 // categories checkboxes 623 $('.js-gme-cat').change(function () { 624 var selectedCats = $('.js-gme-cat:checked').map(function () { 625 return this.value; 626 }); 627 _this.setCategories(selectedCats); 628 }); 629 }, 630 631 _initializeAddressListener: function () { 632 var _this = this, 633 $element = this.element, 634 gme = this.gme; 635 636 $('.js-gme-address').click(function () { 637 var selectedAddress = [$(this).attr('data-address')]; 638 _this.focusAddress(selectedAddress, $element, gme); 639 return false; 640 }); 641 } 642 }; 643 644 // create a new Google Map 645 $.fn.gomapsext = function (gme) { 646 var $element = $(this); 647 if (!$element.data('gomapsextcontroller')) { 648 $element.data('gomapsextcontroller', new GoMapsExt.Controller($element, gme)); 649 } 650 }; 651}(jQuery));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.