React Google Maps On Zoom Changed. Whenever an objects property changes the Maps JavaScript API will fire an event that the property has changed. The result is that most of the page loads nice and fast but the map gets rendered slowly since it has to wait for the component to render before hitting the google maps api to render the map.
Initial options are options that are only applied during componentDidMount this is useful when you want to allow a value to be changed by GoogleMaps controls over timeFor example setting initialZoom10 will allow a user to zoom in and out via the Google Maps zoom controls or double clicking but initialise with a value of 10. In the book we cover many more projects like this. It allows you to render any React component on the Google Map.
To avoid the For development purposes only messages when using the Google Maps API you will need to provide a valid credit card and associate with a Billing account for the Google Cloud Project but it is not required for this tutorial.
To accomplish this you may set the restriction minZoom and maxZoom options. When were done with the markers its useful to remove them from the map. You can pass additional props to your component including zoom low numbers are zoomed out and higher zoomed in see google documentation on zoom here and gps. Find local businesses view maps and get driving directions in Google Maps.
