DEPRECATED

This repository is no longer in active development & use.

Nearby COVID Vaccine Centres, Hospitals etc Search Widget (FREE)

Introduction

This is an easy & FREE to integrate Nearby COVID Places Search (such as Vaccine Centres, Hospitals, Testing Centres, Isolation Centres etc) Widget by MapmyIndia.

Every person can benefit from being able to easily find nearby COVID vaccination centres, hospitals, testing centres etc - see them on a map, get directions, and get more information about them.

We at MapmyIndia are continuously updating the database of COVID-related places, such as vaccine centres, treatment centres/hospitals, containment zones, testing centres, isolation centres etc. This is the most comprehensive pan India covid related map database, and we've released it for free through our MapmyIndia Move app (mapmyindia.com/move) and MapmyIndia Maps portal (maps.mapmyindia.com) and MapmyIndia Corona guide (maps.mapmyindia.com/corona).

We're helping ANY website or app developer to easily integrate this information, as a FREE widget, for the benefit of your users and visitors.

The widget can be used to search for vaccination centres, testing centres, sample collection centres, treatment centres, quarantine centres and micro containment zones across India.

*The image is for illustrative purposes only on how the widget might look like once integrated.

Version History

Version	Last Updated	Author	Release Note
2.0	27 April 2021	Kunal Bharti(KB)	Can search for Vaccination Centres, Testing Centres, Treatment Centres, Containment Zones, Sample Collection Centres, Quarantine Centres
1.1	24 April 2021	Rohan Verma(RV)	Sample Updated
1.0	24 April 2021	Kunal Bharti(KB)	Initial Commit

3 Step process to integrate Nearby COVID Places widget in any Web App

Step 1

Inside the section of HTML of web page, define a div into which the nearby COVID places widget from MapmyIndia needs to be loaded.
```
<div id=“nearby-covid-places-mapmyindia”></div>
```
Step 2

Inside the section of HTML of web page, or wherever else you find more suitable, include the following MapmyIndia javascript code.
```
<script src=“https://maps.mapmyindia.com/covid-places/showNearbyCovidPlacesOnMap.js”></script>
```
Step 3

To load up the nearby COVID places widget from MapmyIndia, call the following javascript code AFTER the mapmyindia javascript file (as defined in step 2) has loaded.
```
loadNearbyCovidCentresMapmyIndiaDiv(document.getElementbyId(“nearby-covid-places-mapmyindia”));
```

That’s it - all done!

On reloading your web page after integrating the code -

You should see a MapmyIndia Map on left, search box on top right, and based on current location the nearest COVID places in right panel.
The first time the code loads, the user may be prompted to share current location to browser so that the map and search results can be localised to the user
User can type into search box, any place of his/her interest, and as he/she types, suggested search results will get populated. Upon clicking of any, new map location with markers of the nearby COVID places, and search results in the panel will get updated.
In the search results panel (and on clicking a marker on the map) - details of the COVID places will show up AND a ‘Get Directions’ button will be there, clicking on which user will be directed to the the directions page (external link).

`loadNearbyCovidCentresMapmyIndiaDiv()` Method

Required Parameters

divID: This is a mandatory parameter which allows the widget to recognise the div where the content of the widget is to be loaded.

Optional Parameters

Params:
- css(string): css' absolute URL as per the design of the target web app. This is ONLY required if and only if the target app wishes to over-ride the default css which is implicitly part of the plugin.
  NOT RECOMMENDED TO CHANGE. Please change only if absolutely necessary.

Sample Code

<html>
<head>
  
  <!-- Include the following MapmyIndia javascript code into your webpage -->
  <script src="https://maps.mapmyindia.com/covid-places/showNearbyCovidPlacesOnMap.js"></script>

</head>
<body>

   <!-- define the div into which the nearby COVID places widget from MapmyIndia needs to be loaded --> 
   <div id="nearby-covid-places-mapmyindia"></div>

   <!-- call the following code AFTER the mapmyindia javascript file has loaded -->    
   <script type="text/javascript">
        loadNearbyCovidCentresMapmyIndiaDiv(document.getElementById("nearby-covid-places-mapmyindia"));
    </script>
</body>

</html>

How to customize CSS to match the style of the plugin with your web app

Sample CSS

(change NOT recommended)

https://maps.mapmyindia.com/covid-places/css/custom.css

To be passed as

loadNearbyCovidCentresMapmyIndiaDiv(document.getElementById("nearby-covid-places-mapmyindia"),{css:"https://maps.mapmyindia.com/covid-places/css/custom.css"});

How to Search for Different Categories of COVID Places

The Nearby COVID Places Widget already has the capabilities to search for not only nearby vaccination centres, but other important COVID places as well. To search for other categories of COVID places, a simple additional parameter in the script URL of the widget enables you to specify which category you want the widget to search for.

Sample Search for Corona Treatment Centres

Script URL

<script src="https://maps.mapmyindia.com/covid-places/showNearbyCovidPlacesOnMap.js?category=HSPTMT"></script>

Sample Code

<html>
<head>
  
  <!-- Include the following MapmyIndia javascript code into your webpage -->
  <script src="https://maps.mapmyindia.com/covid-places/showNearbyCovidPlacesOnMap.js?category=HSPTMT"></script>

</head>
<body>

   <!-- define the div into which the nearby COVID places widget from MapmyIndia needs to be loaded --> 
   <div id="nearby-covid-places-mapmyindia"></div>

   <!-- call the following code AFTER the mapmyindia javascript file has loaded -->    
   <script type="text/javascript">
        loadNearbyCovidCentresMapmyIndiaDiv(document.getElementById("nearby-covid-places-mapmyindia"));
    </script>
</body>

</html>

Other Samples for COVID Nearby Places

Read the following Wiki article to see more sample of how to search for other types of COVID places using the Nearby Search Widget.

How to Embed the Widget as an iFrame

The most important thing to remember while embedding this widget in an iFrame is that, an iFrame by default, does NOT allow for geolocation access. This means that the widget won't get the current location of the user of the web page to allow searching for COVID places near his location.

To overcome this, please ALWAYS add attribute of allowing geolocation in the iFrame tag as follows:

Sample for iFrame embedding of Nearby COVID Places Widget

<iframe width="100%" height="100%" src="https://maps.mapmyindia.com/covid-places/embed?category=HSPVCC" allow="geolocation" >
</iframe>

Native Webview

The same URL can also be used for Native WebView implmentation of the Nearby COVID Places Widget.

Appendix: COVID Places Categories Supported

Category Code	Description
HSPVCC	Corona Vaccination Centres
HSPTST	Corona Testing Centres
HSPTMT	Corona Treatment Centres
HSPCOV	Corona Quarantine Centre
HSPSCC	Corona Sample Collection Centre
CNTZON	Corona Micro Containment Zones