This guide will help you get started with the dealer locator. Integrate your MidwayPlus dealers with any map software that supports GeoJSON, such as Google Maps, MapBox, and more. Using the customer manager in MidwayPlus, you can easily update integrated dealer locator components on your website.

The data to power the locator comes from the "/Dealer/Locator" endpoint, with the brand name as the parameter. If you've not set up any dealers for the locator you can use the "/Dealer/LocatorTest" endpoint to return example data.

var response = await fetch('https://api.midwayplus.com/Dealer/Locator?brand=NAME');
var data = await response.json();

The response is GeoJson, with the dealers available for the brand. An example is shown below:

{
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [42.5001346,-83.43763320000001]
            },
            "type": "Feature",
            "properties": {
                "name": "Contemporary Automotive Performance",
                "address": "123 Main St Detroit, MI 48207",
                "url": "https://www.google.com/search?q=comptemporary+automotive+performance",
                "tel": "313-123-4567",
                "hours": "9AM - 5PM"
            }
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [42.5601225,-83.37476529999999]
            },
            "type": "Feature",
            "properties": {
                "name": "Novi Speed",
                "address": "28175 Haggerty Rd Novi, MI 48377",
                "url": "https://midwayplus.com",
                "tel": "248-123-4567",
                "hours": "8AM - 7PM"
            }
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [42.54736459999999,-83.4420112]
            },
            "type": "Feature",
            "properties": {
                "name": "Lyon Motors",
                "address": "8 Street st road South Lyon, MI 48178",
                "url": "https://www.google.com/search?q=lyon+motors",
                "tel": "248-123-4567",
                "hours": "9AM - 6PM"
            }
        }
    ]
}

The following example shows a dealer locator created within Google Maps.

<div id="map" style="height:500px;width:100%;"><div>
<script src='https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY'></script>

var map, markers = [], data;

        async function createMap() {
            const response = await fetch('/Dealer/LocatorTest');
            data = await response.json();

            var map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 42.5001346, lng: -83.43763320000001 },
                zoom: 5,
            });

            const infoWindow = new google.maps.InfoWindow();

            data.features.forEach((store, index) => {
                const { geometry, properties } = store;

                const marker = new google.maps.Marker({
                    position: { lng: geometry.coordinates[0], lat: geometry.coordinates[1] },
                    map: map,
                    title: properties.name,
                });

                google.maps.event.addListener(marker, 'click', function () {
                    const contentString = `
                                <div>
                                    <p class="Mname">${properties.name}</p>
                                    <p class="Maddress">${properties.address}</p>
                                    <p class="Mdirect">Get directions: <a target="_blank" href="https://www.google.com/maps/dir/?api=1&destination=${properties.address.replace(/ /g, "+")}">To here</a> -
                                    <a target="_blank" href="https://www.google.com/maps/dir/${properties.address.replace(/ /g, "+")}/">From here</a></p>
                                </div>`;
                    infoWindow.setContent(contentString);
                    infoWindow.open(map, marker);
                    map.panTo(marker.getPosition());
                });

                markers.push(marker);
            });
        }

        google.maps.event.addDomListener(window, 'load', createMap);

To include a dealer, open their "Other Settings" in the Customer index page and select "Show in Dealer Locator"