Creating a custom map using Google My Maps is an excellent way to visualize data, highlight important features, and engage with your audience. In this article, we'll explore how to create custom maps and customize them with markers, labels, and more.
function createCustomMap() { // Get the container element where we'll render our map var mapContainer = document.getElementById('google-my-maps-container'); // Create a new Google My Maps instance with an empty map var myMap = new google.maps.Map(mapContainer, { center: { lat: 37.7749, lng: -122.4194 }, zoom: 13, mapType: 'roadmap' }); } // Add the button to our HTML file document.getElementById('google-my-maps-viewer').addEventListener('click', createCustomMap); function addMarkersAndLabels() { // Get the map instance from Google My Maps var myMap = document.getElementById('my-map'); // Create a new marker at the center of the map var marker = new google.maps.Marker({ position: { lat: 37.7749, lng: -122.4194 }, map: myMap }); // Add a label to the marker var label = new google.maps.MarkerLabel({ position: marker.position, content: 'Hello, World!' }); // Set up an event listener for when the marker is clicked marker.addListener('click', function() { alert('You clicked on the map!'); }); } // Add a button to add markers and labels to our custom map document.getElementById('add-marker-label-button').addEventListener('click', addMarkersAndLabels);https://www.google.com/maps/d/viewer?mid=1IhY9c-SoCjRBZM5_t0Wxne4LLfzdf-dT