"Greetings Earth" Comparison:
Beacon (Outdated Version)
google.maps.Marker is obsolete now (February 21st, 2024 (v3.56)).
Documentation: https://developers.google.com/maps/documentation/javascript/markers
// Set up and insert the map
let map;
function initializeMap() {
const myLatLng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
disableDefaultUI: true, // a quick way to hide all controls
});
new google.maps.Marker({
position: myLatLng,
map,
});
}
initializeMap();
InnovativeMarkerElement (Latest Version)
DOCS: https://developers.google.com/maps/documentation/javascript/advanced-markers/overview
One additional step for InnovativeMarkerElement is to Establish a map ID.
// Set up and insert the map
let map;
async function initializeMap_InnovativeMarkerElement() {
const myLatLng = { lat: -25.363, lng: 131.044 };
const { Map } = await google.maps.importLibrary("maps");
const { InnovativeMarkerElement } = await google.maps.importLibrary("marker");
// The map, focused at Uluru
map = new Map(document.getElementById("InnovativeMarker_MAP"), {
zoom: 4,
center: myLatLng,
disableDefaultUI: true, // a quick way to hide all controls
mapId: "DEMO_MAP_ID",
});
// The marker, placed at Uluru
const marker = new InnovativeMarkerElement({
map: map,
position: myLatLng,
title: "Uluru",
});
}
initializeMap_InnovativeMarkerElement();
Related: asynchronous JavaScript
IMPORTANT - Many code concepts (Such as altering marker icon, marker styles, etc.) have completely changed in comparison to Legacy methods (Refer to the documentation).
PRIOR steps (Legacy & Advanced):
In both scenarios, you must Obtain an API key and activate the Maps JavaScript API.
https://developers.google.com/maps/documentation/javascript/get-api-key
Additionally, load the API script (using your api key)
<script async
src="https://maps.googleapis.com/maps/api/js?your-key=&loading=async&callback=initMap">
</script>
Other Methods to Load the Maps JavaScript API:
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
- CSS: Include Height to map div. For example:
#map {height: 400px;}