// Style credit: https://snazzymaps.com/style/1/pale-dawn const mapStyle = [ { "featureType": "administrative", "elementType": "all", "stylers": [ { "visibility": "on" }, { "lightness": 33 } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#f2e5d4" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#c5dac6" } ] }, { "featureType": "poi.park", "elementType": "labels", "stylers": [ { "visibility": "on" }, { "lightness": 20 } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "lightness": 20 } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#c5c6c6" } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#e4d7c6" } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "color": "#fbfaf7" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "visibility": "on" }, { "color": "#acbcc9" } ] } ]; // Escapes HTML characters in a template literal string, to prevent XSS. // See https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.231_-_HTML_Escape_Before_Inserting_Untrusted_Data_into_HTML_Element_Content function sanitizeHTML(strings) { const entities = {'&': '&', '<': '<', '>': '>', '"': '"', "'": '''}; let result = strings[0]; for (let i = 1; i < arguments.length; i++) { result += String(arguments[i]).replace(/[&<>'"]/g, (char) => { return entities[char]; }); result += strings[i]; } return result; } function initMap() { // Create the map. const map = new google.maps.Map(document.getElementsByClassName('map')[0], { zoom: 7, center: {lat: 52.632469, lng: -1.689423}, styles: mapStyle }); // Load the stores GeoJSON onto the map. map.data.loadGeoJson('stores.json'); // Define the custom marker icons, using the store's "category". map.data.setStyle(feature => { return { icon: { url: `img/icon_${feature.getProperty('category')}.png`, scaledSize: new google.maps.Size(64, 64) } }; }); const apiKey = 'YOUR_API_KEY'; const infoWindow = new google.maps.InfoWindow(); infoWindow.setOptions({pixelOffset: new google.maps.Size(0, -30)}); // Show the information for a store when its marker is clicked. map.data.addListener('click', event => { const category = event.feature.getProperty('category'); const name = event.feature.getProperty('name'); const description = event.feature.getProperty('description'); const hours = event.feature.getProperty('hours'); const phone = event.feature.getProperty('phone'); const position = event.feature.getGeometry().get(); const content = sanitizeHTML`

${name}

${description}

Open: ${hours}
Phone: ${phone}

`; infoWindow.setContent(content); infoWindow.setPosition(position); infoWindow.open(map); }); }
Store Locator
{ "type": "FeatureCollection", "features": [ { "geometry": { "type": "Point", "coordinates": [ -0.145365, 51.506182 ] }, "type": "Feature", "properties": { "category": "patisserie", "hours": "10am - 6pm", "description": "Modern twists on classic pastries. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Patisserie Mayfair", "phone": "+44 20 1234 5678" } }, { "geometry": { "type": "Point", "coordinates": [ -2.579623, 51.452251 ] }, "type": "Feature", "properties": { "category": "patisserie", "hours": "10am - 6pm", "description": "Come and try our award-winning cakes and pastries. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Patisserie Bristol", "phone": "+44 117 121 2121" } }, { "geometry": { "type": "Point", "coordinates": [ 1.273459, 52.638072 ] }, "type": "Feature", "properties": { "category": "patisserie", "hours": "10am - 6pm", "description": "Whatever the occasion, whether it's a birthday or a wedding, Josie's Patisserie has the perfect treat for you. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Patisserie Norwich", "phone": "+44 1603 123456" } }, { "geometry": { "type": "Point", "coordinates": [ -1.882509, 50.848831 ] }, "type": "Feature", "properties": { "category": "patisserie", "hours": "10am - 6pm", "description": "A gourmet patisserie that will delight your senses. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Patisserie Wimborne", "phone": "+44 1202 343434" } }, { "geometry": { "type": "Point", "coordinates": [ -2.985933, 53.408899 ] }, "type": "Feature", "properties": { "category": "patisserie", "hours": "10am - 6pm", "description": "Spoil yourself or someone special with our classic pastries. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Patisserie Liverpool", "phone": "+44 151 444 4444" } }, { "geometry": { "type": "Point", "coordinates": [ -1.689423, 52.632469 ] }, "type": "Feature", "properties": { "category": "patisserie", "hours": "10am - 6pm", "description": "Come and feast your eyes and tastebuds on our delicious pastries and cakes. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Patisserie Tamworth", "phone": "+44 5555 55555" } }, { "geometry": { "type": "Point", "coordinates": [ -3.155305, 51.479756 ] }, "type": "Feature", "properties": { "category": "patisserie", "hours": "10am - 6pm", "description": "Josie's Patisserie is family-owned, and our delectable pastries, cakes, and great coffee are renowed. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Patisserie Cardiff", "phone": "+44 29 6666 6666" } }, { "geometry": { "type": "Point", "coordinates": [ -0.725019, 52.668891 ] }, "type": "Feature", "properties": { "category": "cafe", "hours": "8am - 9:30pm", "description": "Oakham's favorite spot for fresh coffee and delicious cakes. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Cafe Oakham", "phone": "+44 7777 777777" } }, { "geometry": { "type": "Point", "coordinates": [ -2.477653, 53.735405 ] }, "type": "Feature", "properties": { "category": "cafe", "hours": "8am - 9:30pm", "description": "Enjoy freshly brewed coffe, and home baked cakes in our homely cafe. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Cafe Blackburn", "phone": "+44 8888 88888" } }, { "geometry": { "type": "Point", "coordinates": [ -0.211363, 51.108966 ] }, "type": "Feature", "properties": { "category": "cafe", "hours": "8am - 9:30pm", "description": "A delicious array of pastries with many flavours, and fresh coffee in an snug cafe. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Cafe Crawley", "phone": "+44 1010 101010" } }, { "geometry": { "type": "Point", "coordinates": [ -0.123559, 50.832679 ] }, "type": "Feature", "properties": { "category": "cafe", "hours": "8am - 9:30pm", "description": "Grab a freshly brewed coffee, a decadent cake and relax in our idyllic cafe. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Cafe Brighton", "phone": "+44 1313 131313" } }, { "geometry": { "type": "Point", "coordinates": [ -3.319575, 52.517827 ] }, "type": "Feature", "properties": { "category": "cafe", "hours": "8am - 9:30pm", "description": "Come in and unwind at this idyllic cafe with fresh coffee and home made cakes. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Cafe Newtown", "phone": "+44 1414 141414" } }, { "geometry": { "type": "Point", "coordinates": [ 1.158167, 52.071634 ] }, "type": "Feature", "properties": { "category": "cafe", "hours": "8am - 9:30pm", "description": "Fresh coffee and delicious cakes in an snug cafe. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Cafe Ipswich", "phone": "+44 1717 17171" } } ] }