Google Maps API - Overlay

بسم الله الرحمن الرحيم
In the name of Allah, the Most Gracious, the Most Merciful

During my work on a project, I was asked to add an overlay for Al-Baha province in the Kingdom of Saudi Arabia. I remembered fulfilling the same request in another project about 4 years ago and the long search for the border coordinates. I found a KML file with coordinates on a website which provides a KML files for countries, states and regions borders and converted them to latitude and longitude, then added them to the map as an overlay.

    // const contains lat/lng coordinates
    const overlayPath = [{lat:20.40994682,lng:42.11893877},{lat:20.40954332,lng:42.11729597},...]; 
    
    // Create overlay from coordinates + adding style
    const Overlay = new google.maps.Polygon({
      paths: overlayPath,
      strokeColor: "#0099dd",
      strokeOpacity: 0.9,
      strokeWeight: 2,
      fillColor: "#0099dd",
      fillOpacity: 0.3,
    });
	
	// Applying overlay to your map instance
    Overlay.setMap(mapInstance);

This time, I compared the borders using the same old coordinates with the actual map of the Al-Baha province on Google Maps, and I found a difference. It might be unnoticeable, but it was somewhat bothersome to me! I started searching again for boundaries coordinates that matched Google Maps - unfortunately, Google doesn’t provide those coordinates - until I found a GitHub repo that provides accurate border coordinates for all administrative regions, cities and districts in the Kingdom.

Saudi Arabia Regions Cities and Districts

It’s a great and tremendous effort, and they deserve thanks for it.