Blog

Introduction: In this tutorial, we will see the control options available in Google Maps. Several controls are customizable, enabling you to modify their function or look. For example, the Map Type control may look as a horizontal bar or a dropdown menu. When the map is created, these controls are m...

Introduction: In this tutorial, we will learn how to replace the default Google Map setting with the custom settings. Several map controls may be customised. Control options fields can be used to customise the controls. The zoomControlOptions field, for example, specifies choices for customising a Z...

Introduction: In this tutorial we will see how the custom positioning of the Map is controlled. Most control choices have a position property (of type ControlPosition) that determines where the control should be placed on the map. The placement of these controls is not definite. Instead, the API wil...

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 immobi...

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...

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 U...

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 th...

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, } ); } dec...

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 = ...