default_map.php
145 lines
| 1 | <?php |
| 2 | /** |
| 3 | * @package VikAppointments |
| 4 | * @subpackage core |
| 5 | * @author E4J s.r.l. |
| 6 | * @copyright Copyright (C) 2021 E4J s.r.l. All Rights Reserved. |
| 7 | * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL |
| 8 | * @link https://vikwp.com |
| 9 | */ |
| 10 | |
| 11 | // No direct access |
| 12 | defined('ABSPATH') or die('No script kiddies please!'); |
| 13 | |
| 14 | JHtml::fetch('vaphtml.assets.googlemaps'); |
| 15 | |
| 16 | $city = $this->city; |
| 17 | |
| 18 | $vik = VAPApplication::getInstance(); |
| 19 | |
| 20 | if (!$city->latitude || !$city->longitude) |
| 21 | { |
| 22 | // display notice |
| 23 | echo $vik->alert(JText::translate('VAPMANAGEEMPLOCATION16'), 'info', false, array('id' => 'city-map-warning')); |
| 24 | } |
| 25 | |
| 26 | ?> |
| 27 | |
| 28 | <div id="city-googlemap" style="width:100%;height:400px;<?php echo (!empty($city->latitude) ? 'display:none;' : ''); ?>"></div> |
| 29 | |
| 30 | <script> |
| 31 | |
| 32 | (function($) { |
| 33 | 'use strict'; |
| 34 | |
| 35 | let map, marker; |
| 36 | |
| 37 | <?php |
| 38 | if (!empty($city->latitude) && !empty($city->longitude)) |
| 39 | { |
| 40 | ?> |
| 41 | let cityLat = <?php echo floatval($city->latitude); ?>; |
| 42 | let cityLng = <?php echo floatval($city->longitude); ?>; |
| 43 | <?php |
| 44 | } |
| 45 | else |
| 46 | { |
| 47 | ?> |
| 48 | let cityLat = ''; |
| 49 | let cityLng = ''; |
| 50 | <?php |
| 51 | } |
| 52 | ?> |
| 53 | |
| 54 | window['evaluateCoordinatesFromCity'] = (address) => { |
| 55 | if (address.length == 0) { |
| 56 | return; |
| 57 | } |
| 58 | |
| 59 | address += ' <?php echo addslashes($this->state->state_name . ' ' . $this->state->country_2_code); ?>'; |
| 60 | |
| 61 | const geocoder = new google.maps.Geocoder(); |
| 62 | |
| 63 | let coord = null; |
| 64 | |
| 65 | geocoder.geocode({address: address}, (results, status) => { |
| 66 | if (status == 'OK') { |
| 67 | coord = { |
| 68 | lat: results[0].geometry.location.lat(), |
| 69 | lng: results[0].geometry.location.lng(), |
| 70 | }; |
| 71 | |
| 72 | $('#vap-city-latitude').val(coord.lat); |
| 73 | $('#vap-city-longitude').val(coord.lng); |
| 74 | |
| 75 | changeCityLatLng(coord.lat, coord.lng); |
| 76 | } |
| 77 | }); |
| 78 | } |
| 79 | |
| 80 | window['changeCityLatLng'] = (lat, lng) => { |
| 81 | cityLat = lat; |
| 82 | cityLng = lng; |
| 83 | |
| 84 | if (cityLat.length == 0 || cityLng.length == 0) { |
| 85 | cityLat = cityLng = ''; |
| 86 | } |
| 87 | |
| 88 | initializeMap(); |
| 89 | } |
| 90 | |
| 91 | const initializeMap = () => { |
| 92 | if (cityLat.length == 0) { |
| 93 | $('#city-googlemap').hide(); |
| 94 | $('#city-map-warning').show(); |
| 95 | return; |
| 96 | } |
| 97 | |
| 98 | const coord = new google.maps.LatLng(cityLat, cityLng); |
| 99 | |
| 100 | $('#city-map-warning').hide(); |
| 101 | |
| 102 | if (map) { |
| 103 | // map already created, just display it |
| 104 | $('#city-googlemap').show(); |
| 105 | // and update the marker |
| 106 | marker.setAnimation(google.maps.Animation.DROP); |
| 107 | marker.setPosition(coord); |
| 108 | map.setCenter(coord); |
| 109 | return; |
| 110 | } |
| 111 | |
| 112 | const mapProp = { |
| 113 | center: coord, |
| 114 | zoom: 14, |
| 115 | mapTypeId: google.maps.MapTypeId.ROADMAP, |
| 116 | }; |
| 117 | |
| 118 | map = new google.maps.Map($('#city-googlemap')[0], mapProp); |
| 119 | |
| 120 | // create marker |
| 121 | marker = new google.maps.Marker({ |
| 122 | position: coord, |
| 123 | draggable: true, |
| 124 | }); |
| 125 | |
| 126 | // update circle position after dragging the marker |
| 127 | marker.addListener('dragend', (e) => { |
| 128 | const markerCoord = marker.getPosition(); |
| 129 | |
| 130 | $('#vap-city-latitude').val(markerCoord.lat()); |
| 131 | $('#vap-city-longitude').val(markerCoord.lng()); |
| 132 | }); |
| 133 | |
| 134 | marker.setMap(map); |
| 135 | |
| 136 | $('#city-googlemap').show(); |
| 137 | } |
| 138 | |
| 139 | $(function() { |
| 140 | initializeMap(); |
| 141 | }); |
| 142 | })(jQuery); |
| 143 | |
| 144 | </script> |
| 145 |