map bard

<div id=”dealer-locator”> <div id=”search-bar”> <input type=”text” id=”dealer-search” placeholder=”Search for a dealer”> <button id=”dealer-search-button”>Search</button> </div> <div id=”map”></div> <div id=”dealer-list”></div> </div> <script> var map = new google.maps.Map(document.getElementById(“map”), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 10 }); var markers = []; var dealerData = [ { “name”: “Armac Martin London”, “address”: “123 London Road, London, UK”, “lat”: 51.500152, “lng”: -0.126236 }, { “name”: “Armac Martin Birmingham”, “address”: “456 Birmingham Road, Birmingham, UK”, “lat”: 52.486252, “lng”: -1.894916 }, { “name”: “Armac Martin Manchester”, “address”: “789 Manchester Road, Manchester, UK”, “lat”: 53.480752, “lng”: -2.244916 } ]; for (var i = 0; i < dealerData.length; i++) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(dealerData[i].lat, dealerData[i].lng), map: map }); var infowindow = new google.maps.InfoWindow({ content: dealerData[i].name + “<br>” + dealerData[i].address }); google.maps.event.addListener(marker, “click”, function() { infowindow.open(map, this); }); markers.push(marker); } document.getElementById(“dealer-search-button”).addEventListener(“click”, function() { var searchTerm = document.getElementById(“dealer-search”).value; for (var i = 0; i < markers.length; i++) { if (markers[i].getTitle().toLowerCase().includes(searchTerm.toLowerCase())) { markers[i].setMap(map); } else { markers[i].setMap(null); } } }); </script>