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 | 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 |
-
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>
-
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>
-
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).
divID: This is a mandatory parameter which allows the widget to recognise the div where the content of the widget is to be loaded.
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.
<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>(change NOT recommended)
https://maps.mapmyindia.com/covid-places/css/custom.cssTo be passed as
loadNearbyCovidCentresMapmyIndiaDiv(document.getElementById("nearby-covid-places-mapmyindia"),{css:"https://maps.mapmyindia.com/covid-places/css/custom.css"});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.
<script src="https://maps.mapmyindia.com/covid-places/showNearbyCovidPlacesOnMap.js?category=HSPTMT"></script><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>Read the following Wiki article to see more sample of how to search for other types of COVID places using the Nearby Search Widget.
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:
<iframe width="100%" height="100%" src="https://maps.mapmyindia.com/covid-places/embed?category=HSPVCC" allow="geolocation" >
</iframe>The same URL can also be used for Native WebView implmentation of the Nearby COVID Places Widget.
| 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 |
For any queries and support, please contact:
