Rich Technologies

Rich Technologies Blog

645 Views3minsJanuary 21, 2023
google map,

Google map show the city or any area boundaries on map

You can use the Google Maps JavaScript API to display city boundaries on a map. Here’s an example of how you might use the API to display the boundaries of a city when its name is entered:

<!DOCTYPE html>
<html>
<head>
  <title>City Boundaries</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script>
    var map;
    var cityPolygon;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {lat: 37.7749, lng: -122.4194} // Default to San Francisco
      });
    }

    function showCityBoundaries() {
      var cityName = document.getElementById("cityName").value;
      
      // Use the city name to get the city's boundaries from a data source
      // In this example, I am using GeoJSON data from a file, you can use any data source of your choice.
      fetch('path/to/city_boundaries.geojson')
        .then(response => response.json())
        .then(data => {
          data.features.forEach(feature => {
            if (feature.properties.name === cityName) {
              var coordinates = feature.geometry.coordinates[0];
              var paths = [];
              coordinates.forEach(point => {
                paths.push({lat: point[1], lng: point[0]});
              });
              cityPolygon = new google.maps.Polygon({
                paths: paths,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
              });
              cityPolygon.setMap(map);
            }
          });
        });
    }
    
    function clearCityBoundaries() {
      if(cityPolygon) {
        cityPolygon.setMap(null);
      }
    }
  </script>
</head>
<body onload="initMap()">
  <div id="map" style="height: 500px; width: 100%;"></div>
  <br>
  <input type="text" id="cityName" placeholder="Enter City Name">
  <button onclick="showCityBoundaries()">Show City Boundaries</button>
  <button onclick="clearCityBoundaries()">Clear City Boundaries</button>
</body>
</html>

You need to replace YOUR_API_KEY with a valid API key obtained from Google Cloud Console.

In this example, the function showCityBoundaries uses the entered city name to fetch the boundaries of that city from a data source in GeoJSON format. The data source can be any file or API service that provides the city boundaries in a format that can be parsed and used to create a Google Maps Polygon object.

The function clearCityBoundaries is used to clear the boundaries from the map when the button is clicked.

Please keep in mind that you will need to have a data source with city boundaries information, and adapt the code accordingly to match your data structure.

Some GEO JSON Sources.

There are a few sources where you can find city boundary data in JSON format:

  1. OpenStreetMap (OSM): OSM is a collaborative project that provides a free and editable map of the world. You can use the Overpass API to query for city boundary data in OSM in the GeoJSON format.
  2. Natural Earth: Natural Earth is a public domain map dataset that provides vector and raster data at various scales. The data is available in a variety of formats, including GeoJSON, and can be downloaded for free.
  3. GeoJSON.io: GeoJSON.io is a web-based editor for creating, editing, and sharing GeoJSON data. You can use this tool to create your own city boundaries data or edit existing data.
  4. GADM: GADM is a database of global administrative areas, which provides a hierarchical structure for the world’s administrative areas (e.g. provinces, states, districts) and their boundaries. The data is available in a variety of formats, including GeoJSON, and can be downloaded for free.
  5. GeoDataSource: GeoDataSource provides a variety of geographic data, including city boundaries, that can be purchased in a variety of formats, including JSON.

Please keep in mind that the data quality and coverage can vary depending on the source, and you may need to clean or process the data to match your requirements. Additionally, please check the terms of use and licensing agreements of the source before using the data.