Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

How to use google maps api ( react ) [ google geocoding?


Asked by Maci Charles on Dec 04, 2021 React



Due to the type of request that Google Maps Geocoding takes (GET) the submitted address must be encoded so it can be sent in the URL of the request. For example;
Also,
Go to the Google Cloud Console . Click the Select a project button, then select the same project you set up for the Maps JavaScript API and click Open. From the list of APIs on the Dashboard, look for Geocoding API. If you see the API in the list, you’re all set. If the API is not listed, enable it:
Furthermore, Heading over to your browser, your map should first load with your initialCenter then reload to pick your browser’s current location with the Marker positioned to this location and voilà, you are done: In this article you were able to load your <Map> React component, add a Marker and associate an InfoWindow to it.
Subsequently,
It means Google has blocked access from referrer-restricted API key, and it's very unlikely that Google has two versions of same API with different API restrictions, so you can't use Geocoding API with your restricted key. But you can create other API key with other restrictions applied, i.e. IP restriction.
In respect to this,
Geocoding is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates. In this tutorial we're going to build React.js component that implements this application: