Custom Google Map with Melbourne Plumber Information

function initMap() { // Create a new Google Map instance with a custom center and zoom level const map = new google.maps.Map(document.getElementById('map-container'), { center: { lat: 36.1552, lng: 144.9791 }, zoom: 12, }); // Add markers to the map for Melbourne plumbers const plumberMarkers = [ { location: { lat: 36.1573, lng: 144.9836 }, title: 'Plumber Services', description: 'Get reliable and affordable plumbing services in Melbourne', }, { location: { lat: 36.1564, lng: 144.9709 }, title: 'Emergency Plumbing', description: '24/7 emergency plumbing services for residential and commercial clients', }, ]; plumberMarkers.forEach((marker) => { // Create a custom marker with an icon const marker = new google.maps.Marker({ map, position: marker.location, icon: 'https://chart.googleapis.com/chart?cht=icon&chs=32&chd=t:' + marker.title + ',' + marker.description, }); // Add an info window to the marker with additional information const infoWindow = new google.maps.InfoWindow({ content: '

' + marker.title + '

' + marker.description + '

', }); marker.addListener('click', () => { infoWindow.open(map, marker.position); }); // Add a custom overlay to the marker with information about the plumber const overlay = new google.maps.InfoWindow({ content: '

Meet our Plumbers:

' + marker.location + '

', }); marker.addListener('click', () => { overlay.open(map, marker.position); }); }); } // Add event listeners to the map container for custom markers and info windows google.maps.event.addListener(document.getElementById('map-container'), 'click', initMap);

https://www.google.com/maps/d/viewer?mid=1Tr_67pjwuY3G_9ZJzJAtXhlgJ-syu6kW