Google Maps integration demo

Introduction #

Add a marker to a Google map when a location is selected.

HTML #

            
<html>

    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic"/>
    </head>

    <body>
                
        <div id="search-container"></div>
        <div id="map"></div>

        <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script>
        <script src="/assets/js/app.js"></script>

        <script>
            function initMap() {
                const myLatLng = {
                    lat: 53.7358968,
                    lng: -5.2854619,
                };
                window.map = new google.maps.Map(
                    document.getElementById("map"),
                    {
                        zoom: 5,
                        center: myLatLng,
                    }
                );
            }
        </script>

        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap"></script>

    </body>
</html>

CSS #

            
body {
    background: black;
    color: white;
    padding-top: 60px;
}

.algolia-autocomplete {
    width: 100%;
}
    
.algolia-autocomplete .aa-input,
    .algolia-autocomplete .aa-hint {
    width: 100%;
}
    
.algolia-autocomplete .aa-hint {
    color: #999;
}
    
.algolia-autocomplete .aa-dropdown-menu {
    width: 100%;
    background-color: #fff;
    border: 1px solid #999;
    border-top: none;
}
    
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
    cursor: pointer;
    padding: 5px 4px;
}
    
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
    background-color: #b2d7ff;
}
    
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
    font-weight: bold;
    font-style: normal;
}
    
#map {
    margin-top: 30px;
    width: 100%;
    height: 350px;
}
    
#search-container {
    margin-top: 30px;
}

JavaScript #

            
const { autocomplete, getAlgoliaResults } = window["@algolia/autocomplete-js"];

const searchClient = algoliasearch(
    "DM340JGS49",
    "YOUR_PLACESAPI_KEY_HERE"
);

autocomplete({
    container: "#search-container",
    detachedMediaQuery: "none",
    placeholder: "Search for places...",
    onReset() {
        initMap();
    },
    onStateChange({ prevState, state }) {
        if (state.query.length == 0) {
            initMap();
        }
    },
    getSources() {
        return [{
            sourceId: "places",
            getItems({ query }) {
                return getAlgoliaResults({
                    searchClient,
                    queries: [
                        {
                            indexName: "places",
                            query,
                        },
                    ],
                });
            },
            templates: {
                item({ item }) {
                    return `${item.name}, ${item.county}, ${item.country}`;
                },
            },
            onSelect: function (event) {

                event.setQuery(event.item.name + ", " + event.item.county + ", " + event.item.country);

                map.setCenter({
                    lat: parseFloat(event.item.latitude),
                    lng: parseFloat(event.item.longitude),
                });

                map.setZoom(12);

                if (window.marker) {
                    window.marker.setMap(null);
                }

                window.marker = new google.maps.Marker({
                    position: {
                        lat: parseFloat(event.item.latitude),
                        lng: parseFloat(event.item.longitude),
                    },
                    map,
                    title: event.item.title,
                });
            },
        }];
    },
});