Introduction: In this tutorial, we will see the custom controls in Google Map API. You may develop your own controls to manage user interaction in addition to altering the design and location of existing API components. In contrast to overlays, which move with the underlying map, controls are immobile widgets that float on top of […]

Introduction: In this tutorial, we will learn how to add the state to the controls. This example shows how to build controls that save state. It displays a map with two buttons labelled “Set Center” and “Center Map.” The “Set Center” button may be used to save the map’s centre. When you press the “Center […]

Introduction: In this tutorial we will learn how to create a map by disabling the default settings of map creation. Below given example, creates a map with the default UI controls disabled (for example, it has no zoom controls or Street View icon). You might want to disable the API’s default UI buttons completely. Set […]

Introduction: In this tutorial, we will see how to restrict the Map bounds in Google Maps. This example generates a map beginning in Auckland, New Zealand. The map only shows New Zealand. The user may move away from Auckland and explore other New Zealand cities, but they cannot pan or zoom beyond the map’s boundaries. […]

Introduction: In this tutorial, we will learn how to create a map with the help of default controls available in Google Maps. Code: function initMap(): void { const map = new google.maps.Map( document.getElementById(“map”) as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, } ); } declare global { interface Window { initMap: […]

Introduction: In this tutorial we will learn how to create a map which displays a window with the latitude, longitude, and world, pixel, and tile coordinates for Chicago, IL. Also, we will  show how these values change as the zoom level is adjusted. Code: function initMap(): void { const chicago = new google.maps.LatLng(41.85, -87.65); const […]

Introduction: The Geolocation API gives a location and accuracy radius based on cell tower and WiFi node information detected by the mobile client. The protocol used to deliver this data to the server and return a response to the client is described in this document. POST is used for HTTPS communication. Both the request and […]

Introduction: This example generates a Japanese-language map independent of the user’s browser settings. The region is also set to Japan, skewing the geocoding findings to that country. You can tailor your map to a specific country or region by doing the following: Change the language settings to something other than English. Enter a region code […]

Introduction: In this tutorial we will learn to create a map that renders a map of Cairo, Egypt in Arabic. This example displays a map with the language set to Arabic and the regions set to Egypt. These settings are specified in the HTML script element when loading the Google Maps JavaScript API. Setting the […]