@types/googlemaps

Map Initialization

This feature allows you to initialize a Google Map with a specified center and zoom level.

const map = new google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8 });

Adding Markers

This feature allows you to add markers to the map at specified locations.

const marker = new google.maps.Marker({ position: { lat: -34.397, lng: 150.644 }, map: map, title: 'Hello World!' });

Geocoding

This feature allows you to convert addresses into geographic coordinates and place markers on the map.

const geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': 'Sydney, NSW' }, function(results, status) { if (status === 'OK') { map.setCenter(results[0].geometry.location); const marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert('Geocode was not successful for the following reason: ' + status); } });

Drawing Shapes

This feature allows you to draw shapes like rectangles on the map, with options to make them editable and draggable.

const rectangle = new google.maps.Rectangle({ bounds: { north: 33.685, south: 33.671, east: -116.234, west: -116.251 }, editable: true, draggable: true }); rectangle.setMap(map);