From 211be80bb60487d7d88d5c38002a0c72047e2102 Mon Sep 17 00:00:00 2001 From: d9it Date: Fri, 29 Mar 2024 18:32:17 +0530 Subject: [PATCH] Update map marker code and other changes --- .../Controllers/backend/ImportController.php | 11 +- resources/views/backEnd/pages/map.blade.php | 52 ++-- .../views/frontEnd/locations/show.blade.php | 49 ++-- .../frontEnd/organizations/show.blade.php | 115 +++++---- .../frontEnd/services/services.blade.php | 243 +++++++++--------- .../views/frontEnd/services/show.blade.php | 71 ++--- 6 files changed, 290 insertions(+), 251 deletions(-) diff --git a/app/Http/Controllers/backend/ImportController.php b/app/Http/Controllers/backend/ImportController.php index 346e3855..5a550f7e 100644 --- a/app/Http/Controllers/backend/ImportController.php +++ b/app/Http/Controllers/backend/ImportController.php @@ -83,11 +83,8 @@ class ImportController extends Controller { - public $mapController; - - public function __construct(MapController $mapController) + public function __construct(public MapController $mapController) { - $this->mapController = $mapController; } /** @@ -211,7 +208,7 @@ public function store(Request $request) } ImportDataSource::create([ 'name' => $request->name, - 'format' => $request->format, + 'format' => $request->get('format'), 'airtable_api_key' => $airtable_access_token, 'airtable_base_id' => $airtable_base_id, 'auto_sync' => $request->auto_sync, @@ -369,7 +366,7 @@ public function update(Request $request, $id) } ImportDataSource::whereId($id)->update([ 'name' => $request->name, - 'format' => $request->format, + 'format' => $request->get('format'), 'airtable_api_key' => $airtable_access_token, 'airtable_base_id' => $airtable_base_id, 'auto_sync' => $request->auto_sync, @@ -475,7 +472,7 @@ public function getImportHistory(Request $request) return DataTables::of($importHistory) ->editColumn('created_at', function ($row) { - return date('d-m-Y H:i:s A', strtotime($row->created_at)); + return date('Y-m-d H:i:s', strtotime($row->created_at)); }) ->editColumn('auto_sync', function ($row) { $link = $row->auto_sync == 1 ? 'Auto' : 'Manual'; diff --git a/resources/views/backEnd/pages/map.blade.php b/resources/views/backEnd/pages/map.blade.php index 5932fad8..9b6d2c46 100644 --- a/resources/views/backEnd/pages/map.blade.php +++ b/resources/views/backEnd/pages/map.blade.php @@ -47,7 +47,7 @@ value="{{ '********************' . substr($map->javascript_map_key, -7) }}" name="api_key1" id="api_key1" disabled> + id="api_key2" style="display: none;" > @if ($errors->first('javascript_map_key'))
{{ $errors->first('javascript_map_key') }}
@@ -63,7 +63,7 @@ value="{{ '********************' . substr($map->geocode_map_key, -7) }}" name="api_key1" id="geocode_api_key1" disabled> + id="geocode_api_key2" style="display: none;" > @if ($errors->first('geocode_map_key'))
{{ $errors->first('geocode_map_key') }}
@@ -333,30 +333,42 @@ class="optional form-control col-md-7 col-xs-12" value="{{$map->long}}" var locations = ; + + let position + let zoom if (locations.active == 1) { - var map = new GMaps({ - el: '#map', - lat: locations.lat, - lng: locations.long, - zoom: locations.zoom - }); - map.addMarker({ - lat: locations.lat, - lng: locations.long - }); + position = { + lat: parseFloat(locations.lat), + lng: parseFloat(locations.long), + } + zoom = locations.zoom } else { - var map = new GMaps({ - el: '#map', + position = { lat: 40.712722, lng: -74.006058, - zoom: 10 - }); - map.addMarker({ - lat: 40.712722, - lng: -74.006058 - }); + } + zoom = 10 } + setTimeout(() => { + async function initMap() { + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( + "marker", + ); + const map = new Map(document.getElementById("map"), { + center: position, + zoom: zoom, + mapId: "4504f8b37365c3d0", + }); + const marker = new AdvancedMarkerElement({ + map, + position: position, + title: location.location_name, + }); + } + initMap() + }, 2000); }); @endsection diff --git a/resources/views/frontEnd/locations/show.blade.php b/resources/views/frontEnd/locations/show.blade.php index 7a4b4504..76c697ab 100644 --- a/resources/views/frontEnd/locations/show.blade.php +++ b/resources/views/frontEnd/locations/show.blade.php @@ -650,15 +650,19 @@ class="btn btn-raised btn-lg btn_darkblack waves-effect waves-classic">Close'+value.services[i].service_name+''; @@ -678,26 +682,33 @@ class="btn btn-raised btn-lg btn_darkblack waves-effect waves-classic">Close'; if(value.location_latitude){ - mymap.addMarker({ + const infowindow = new google.maps.InfoWindow({ + content: content, + ariaLabel: "Uluru", + }); + let position = { lat: value.location_latitude, lng: value.location_longitude, - title: value.city, - - infoWindow: { - maxWidth: 250, - content: (content) - } + } + const marker = new AdvancedMarkerElement({ + map, + position: position, + title: location.location_name, + }); + marker.addListener("click", () => { + infowindow.open({ + anchor: marker, + map, + }); }); } }); + } + initMap() }, 2000) }); - - @endsection diff --git a/resources/views/frontEnd/organizations/show.blade.php b/resources/views/frontEnd/organizations/show.blade.php index 4a724fbb..5629abe3 100644 --- a/resources/views/frontEnd/organizations/show.blade.php +++ b/resources/views/frontEnd/organizations/show.blade.php @@ -505,10 +505,7 @@ class="subtitle">{{ $detail['detail_type'] }}:
@if (isset($organization->contact)) @if ($organization->contact->count() > 0 && ((Auth::user() && Auth::user()->roles && Auth::user()->roles->name == 'System Admin') || (Auth::user() && Auth::user()->roles && Auth::user()->user_organization && str_contains(Auth::user()->user_organization, $organization->organization_recordid) && (Auth::user()->roles->name == 'Organization Admin' || Auth::user()->roles->name == 'Section Admin')) || (Auth::user() && Auth::user()->roles->name == 'Network Admin' && count(array_intersect(explode(',', Auth::user()->organization_tags),explode(',', $organization->organization_tag))) > 0) || (Auth::user() && Auth::user()->roles && count(array_intersect(explode(',', Auth::user()->organization_tags),explode(',', $organization->organization_tag))) > 0))) - {{--

Contacts - (@if (isset($organization->contact)){{$organization->contact->count()}}@else - 0 @endif) -

--}} + @foreach ($organization->contact as $contact_info)
@if (Auth::user() && Auth::user()->roles && Auth::user()->roles->name == 'System Admin') @@ -611,13 +608,11 @@ class="float-right"> @auth
    - {{-- @if (Auth::user() && Auth::user()->roles && (Auth::user()->roles->name != 'Organization Admin' || Auth::user()->roles->name != 'Section Admin')) --}}

  • Notes
    • - {{-- @endif --}}

  • Comments

    @@ -1095,65 +1090,73 @@ class="btn btn-danger btn-lg btn_delete red_btn organizationTagCloseButton">Clos longitude = avglng; } - var map = new google.maps.Map(document.getElementById('map'), { - zoom: zoom, - center: { - lat: parseFloat(latitude), - lng: parseFloat(longitude) - } - }); - - var latlongbounds = new google.maps.LatLngBounds(); - var markers = locations.map(function(location, i) { - var position = { - lat: location.location_latitude, - lng: location.location_longitude - } - var latlong = new google.maps.LatLng(position.lat, position.lng); - latlongbounds.extend(latlong); + async function initMap() { + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( + "marker", + ); - var content = '
    '; - for (i = 0; i < location.services.length; i++) { - content += '
    ' + location.services[i].service_name + '
    '; - } - // '
    ' + location.service_name + '
    ' + + const map = new Map(document.getElementById("map"), { + center: { lat: parseFloat(latitude), lng: parseFloat(longitude) }, + zoom: zoom, + mapId: "4504f8b37365c3d0", + }); - content += '
    ' + - '
    Organization Name
    ' + - '' + location - .organization_name + ''; - // '
    Address
    ' + - // location.address_name ; - // '
    View on Google Maps'+ + var latlongbounds = new google.maps.LatLngBounds(); + var markers = locations.map(function(location, i) { + var position = { + lat: location.location_latitude, + lng: location.location_longitude + } + var latlong = new google.maps.LatLng(position.lat, position.lng); + latlongbounds.extend(latlong); - if (location.address) { - for (i = 0; i < location.address.length; i++) { - content += '
    Address
    ' + location.address[i].address_1 + (location.address[i].address_city ? ', ' + location.address[i].address_city : '') + (location.address[i].address_state_province ? ',' + location.address[i].address_state_province : '') + (location.address[i].address_postal_code ? ',' + location.address[i].address_postal_code : ''); - content +=''; + var content = '
    '; + for (i = 0; i < location.services.length; i++) { + content += '
    ' + location.services[i].service_name + '
    '; } - } - content += '
    ' + - '
    '; + // '
    ' + location.service_name + '
    ' + - var infowindow = new google.maps.InfoWindow({ - content: content - }); + content += '
    ' + + '
    Organization Name
    ' + + '' + location + .organization_name + ''; + // '
    Address
    ' + + // location.address_name ; + // '
    View on Google Maps'+ - var marker = new google.maps.Marker({ - position: position, - map: map, - title: location.location_name, - }); - marker.addListener('click', function() { - infowindow.open(map, marker); + if (location.address) { + for (i = 0; i < location.address.length; i++) { + content += '
    Address
    ' + location.address[i].address_1 + (location.address[i].address_city ? ', ' + location.address[i].address_city : '') + (location.address[i].address_state_province ? ',' + location.address[i].address_state_province : '') + (location.address[i].address_postal_code ? ',' + location.address[i].address_postal_code : ''); + content +=''; + } + } + content += '
    ' + + '
    '; + + const infowindow = new google.maps.InfoWindow({ + content: content, + ariaLabel: "Uluru", + }); + const marker = new AdvancedMarkerElement({ + map, + position: position, + title: location.location_name, + }); + marker.addListener("click", () => { + infowindow.open({ + anchor: marker, + map, + }); + }); }); - return marker; - }); - if (locations.length > 1) { - map.fitBounds(latlongbounds); + if (locations.length > 1) { + map.fitBounds(latlongbounds); + } } + initMap() }); diff --git a/resources/views/frontEnd/services/services.blade.php b/resources/views/frontEnd/services/services.blade.php index fdf32c44..d72f56b0 100644 --- a/resources/views/frontEnd/services/services.blade.php +++ b/resources/views/frontEnd/services/services.blade.php @@ -376,12 +376,9 @@ setTimeout(function(){ var locations = ; var maplocation = ; - // var chip_address = ; var chip_address = "{{isset($chip_address) ? $chip_address : '0'}}" var chip_service = "{{isset($chip_service) ? $chip_service : '0'}}" - // var avarageLatitude = ; var avarageLatitude = "{{ isset($avarageLatitude) ? $avarageLatitude : '0' }}" - // var avarageLongitude = ; var avarageLongitude = "{{ isset($avarageLongitude) ? $avarageLongitude : '0' }}" var sumlat = 0.0; var sumlng = 0.0; @@ -390,9 +387,7 @@ avglat = maplocation.lat; avglng = maplocation.long; zoom = maplocation.zoom; - } - else - { + } else { avglat = 40.730981; avglng = -73.998107; zoom = 14; @@ -406,132 +401,148 @@ avglng = avarageLongitude } } - var mymap = new GMaps({ - el: '#map', - lat: avglat, - lng: avglng, - zoom: zoom - }); - let checkunKnownAddress = []; - $.each(locations, function(index, value ){ - var name = value.organization == null? '' :value.organization.organization_name; - var content = '
    '; - let first_service = [] - if(chip_service != '0' && chip_service != ''){ - value.services.map(function(v,i){ - // console.log(v,v.service_name.toLowerCase().includes(chip_service),chip_service) - if(v.service_name.toLowerCase().includes(chip_service) && first_service.length == 0){ - return first_service.push(i) + async function initMap() { + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( + "marker", + ); + + const map = new Map(document.getElementById("map"), { + center: { lat: parseFloat(avglat), lng: parseFloat(avglng) }, + zoom: zoom, + mapId: "4504f8b37365c3d0", + }); + + let checkunKnownAddress = []; + $.each(locations, function(index, value ){ + var name = value.organization == null? '' :value.organization.organization_name; + var content = '
    '; + let first_service = [] + if(chip_service != '0' && chip_service != ''){ + value.services.map(function(v,i){ + if(v.service_name.toLowerCase().includes(chip_service) && first_service.length == 0){ + return first_service.push(i) + } + }) + } + if(value.services.length > 0){ + let indexValue + if(first_service.length > 0){ + indexValue = first_service[0] + }else{ + indexValue = 0 } - }) - } - if(value.services.length > 0){ - let indexValue - if(first_service.length > 0){ - indexValue = first_service[0] - }else{ - indexValue = 0 + content += '
    '+value.services[indexValue].service_name+'
    '; } - content += '
    '+value.services[indexValue].service_name+'
    '; - } - if(value.organization){ + if(value.organization){ - content += '
    ' + - '
    Organization Name
    ' + - '' + value.organization.organization_name +''; - } - if(value.address){ - for(i = 0; i < value.address.length; i ++){ - // content += '
    Address
    '+ - // value.address[i].address_1+ ', '+value.address[i].address_city+','+value.address[i].address_state_province+','+value.address[i].address_postal_code ; - content += '
    Address
    ' + - value.address[i].address_1 + (value.address[i] - .address_city ? ', ' + value.address[i] - .address_city : '') + (value.address[i].address_state_province ? ',' + value.address[i].address_state_province : '') + - (value.address[i].address_postal_code ? ',' + value.address[i].address_postal_code : ''); - // content += ''; - content += ''; + content += '
    ' + + '
    Organization Name
    ' + + '' + value.organization.organization_name +''; } - } - if(value.services.length > 1){ - content += '
    Other Services
    '; - } - content += '
      ' - if(first_service.length > 0){ - let indexValue = first_service[0] - for(i = 0; i < value.services.length; i ++){ - if(i != indexValue) + if(value.address){ + for(i = 0; i < value.address.length; i ++){ + content += '
      Address
      ' + + value.address[i].address_1 + (value.address[i] + .address_city ? ', ' + value.address[i] + .address_city : '') + (value.address[i].address_state_province ? ',' + value.address[i].address_state_province : '') + + (value.address[i].address_postal_code ? ',' + value.address[i].address_postal_code : ''); + content += ''; + } + } + if(value.services.length > 1){ + content += '
      Other Services
      '; + } + content += '' - content += '
    ' + - '
    ' + - '
    '; + content += '
' + content += '
' + + '
' + + '
'; - if(value.location_latitude){ + if(value.location_latitude){ - if(chip_address != '0' && avarageLatitude != '0' && avarageLongitude != '0' && value.location_latitude == avarageLatitude && value.location_longitude == avarageLongitude){ - checkunKnownAddress.push(1) - let url = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"; - mymap.addMarker({ - - lat: value.location_latitude, - lng: value.location_longitude, - title: value.city, - - infoWindow: { - maxWidth: 250, - content: (content) - }, - icon: { - url: url, - scaledSize: new google.maps.Size(40, 40), // size - } - }); - }else{ - mymap.addMarker({ - - lat: value.location_latitude, - lng: value.location_longitude, - title: value.city, + if(chip_address != '0' && avarageLatitude != '0' && avarageLongitude != '0' && value.location_latitude == avarageLatitude && value.location_longitude == avarageLongitude){ + checkunKnownAddress.push(1) + const pinBackground = new PinElement({ + background: "#FBBC04", + }); + const infowindow = new google.maps.InfoWindow({ + content: content, + ariaLabel: "Uluru", + }); + const marker = new AdvancedMarkerElement({ + map, + position: { lat: value.location_latitude, lng: value.location_longitude }, + title: value.city, + content: pinBackground.element, + }); + marker.addListener("click", () => { + infowindow.open({ + anchor: marker, + map, + }); + }); + }else{ + const infowindow = new google.maps.InfoWindow({ + content: content, + ariaLabel: "Uluru", + }); + const marker = new AdvancedMarkerElement({ + map, + position: { lat: value.location_latitude, lng: value.location_longitude }, + title: value.city, + }); + marker.addListener("click", () => { + infowindow.open({ + anchor: marker, + map, + }); + }); + } + } + }); + let content = ''; + if(chip_address != '0'){ + content = '
Address
'+ + '' + chip_address +'
'; + } + if(chip_address != '0' && avarageLatitude != '0' && avarageLongitude != '0' && checkunKnownAddress.length == 0){ - infoWindow: { - maxWidth: 250, - content: (content) - } + const infowindow = new google.maps.InfoWindow({ + content: content, + ariaLabel: "Uluru", + }); + const pinBackground = new PinElement({ + background: "#FBBC04", + }); + const marker = new AdvancedMarkerElement({ + map, + position: { lat: parseFloat(avarageLatitude), lng: parseFloat(avarageLongitude) }, + content: pinBackground.element, + }); + marker.addListener("click", () => { + infowindow.open({ + anchor: marker, + map, }); - } + }); } - }); - let content = ''; - if(chip_address != '0'){ - content = '
Address
'+ - '' + chip_address +'
'; } - if(chip_address != '0' && avarageLatitude != '0' && avarageLongitude != '0' && checkunKnownAddress.length == 0){ - let url = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"; - mymap.addMarker({ - - lat: avarageLatitude, - lng: avarageLongitude, + initMap() - infoWindow: { - maxWidth: 250, - content: (content) - }, - icon: { - url: url, - scaledSize: new google.maps.Size(40, 40), // size - } - }); - } }, 2000); $('.panel-link').on('click', function(e){ diff --git a/resources/views/frontEnd/services/show.blade.php b/resources/views/frontEnd/services/show.blade.php index 3cc0ae30..bd119f94 100644 --- a/resources/views/frontEnd/services/show.blade.php +++ b/resources/views/frontEnd/services/show.blade.php @@ -1074,11 +1074,8 @@ class="btn btn-primary btn-lg btn_padding green_btn waves-effect waves-classic"