JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<script src="https://cdn.kyruus.com/lib/kyruus-search-widget/version/2/kyruus-search-widget.min.js"></script>

<div id="kyruus-search-widget"></div>

  <button type="button" class="find-me btn">Find My Location</button>


  <p class="no-browser-support">Sorry, the Geolocation API isn't supported in Your browser.</p>
  <p class="coordinates">Latitude: <b class="latitude"></b> Longitude: <b class="longitude"></b></p>

JavaScript

//KYRUUS SEARCH WIDGET
        (function() {
            var kyruusSearchWidget = new KyruusSearchWidget({
                pm_url: 'https://doctors.nghs.com',
                el: document.getElementById('kyruus-search-widget'),
                customer_code: 'nghs',
                search_label: 'Search',
                message: 'ex: Primary Care',
                show_location: true,
                location_search_radius: 10,
                show_powered_by: false,
                typeahead_categories: [
                    {
                        "category": "clinical_experience"
                    },
                    {
                        "category": "specialty_synonym"
                    },
                    {
                        "category": "name"
                    },
                    {
                        "category": "primary_care"
                    }
                ],
                allow_empty_search: true,
                focus_on_widget: true,
                use_primary_care_condition: true,
                persist_query: true,
                legal_message: 'off',
                sort_order: 'relevance, networks',
            });
        }());




$(document).ready(function(){ 

     $("#location").attr("placeholder", "City, State or Zip");
     $("#query").blur(); 
		 
		 
		 
		 var findMeButton = $('.find-me');

// Check if the browser has support for the Geolocation API
if (!navigator.geolocation) {

  findMeButton.addClass("disabled");
  $('.no-browser-support').addClass("visible");

} else {

  findMeButton.on('click', function(e) {

    e.preventDefault();

    navigator.geolocation.getCurrentPosition(function(position) {

      // Get the coordinates of the current possition.
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;

      $('.latitude').text(lat.toFixed(3));
      $('.longitude').text(lng.toFixed(3));
      $('.coordinates').addClass('visible');

     

    });

 ...