@types/google.maps

Map Initialization

This code initializes a new Google Map instance on the page, setting the zoom level and the center of the map.

{"const map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: { lat: -25.344, lng: 131.036 } });"}

Marker Placement

This code places a marker on the map at a specified latitude and longitude, and sets a title for the marker.

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

InfoWindow

This code creates an InfoWindow with some content and attaches it to a marker, so that it opens when the marker is clicked.

{"const infowindow = new google.maps.InfoWindow({ content: 'Uluru (Ayers Rock)' }); marker.addListener('click', function() { infowindow.open(map, marker); });"}

Directions Service

This code uses the Directions Service to calculate a route from Chicago to Los Angeles and then renders it on the map.

{"const directionsService = new google.maps.DirectionsService(); const directionsRenderer = new google.maps.DirectionsRenderer(); directionsRenderer.setMap(map); const request = { origin: 'Chicago, IL', destination: 'Los Angeles, CA', travelMode: 'DRIVING' }; directionsService.route(request, function(result, status) { if (status == 'OK') { directionsRenderer.setDirections(result); } });"}