Google Maps listing out private buildings in Hong Kong that built before 1948.
Using Google Maps API and APITable for a simple demo.
- Single page example. No external framework besides Google Maps API
This repo is also a great example on how to use APITable as an easy to set up endpoint of your maps app.
This files are essential for your page:
- index.html - The main map page. You can update the content directly on the page.
- location_24x24.png - The marker image, you may use the default one or your own icon (just replace this image).
Replace XXXXXXXXXXXX
with your API Key in the code below, located in the bottom most part in index.html
. Follow the instruction on the Google Maps Docs to get your own key.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXX&callback=initMap">
</script>
You can define your own data schema according to your usage, however this example follows the following schema on APITable:
- Sign up at APITable
- Add a new table
- Add columns according to the following
- Name -
name
Address / Name of the place (Must not be empty) - Latitude -
lat
The Latitude of the location - Longitude -
long
The Longitude of the location - Detail -
detail
Detail of the place. - Year Built -
yearbuilt
The year of the building is built.
- Copy and paste data to the table
- Click
Save
button to save data - Click
Get End Point
button to export an endpoint - You need to have a valid token to access to the endpoint, click
creat new token
- Click on
view
button next to the new token generated. You will be able to get the URL directly in this format:https://apitable.skygeario.com/api/tables?id=15414c95-a675-4dec-b29e-165dde8ee59d&token=XXXXXXXX
- You can then use this endpoint in your app.