Home > other >  Can't get store info when clicking on google maps marker
Can't get store info when clicking on google maps marker

Time：03-15

I have a Google maps project that I'm playing around with where I want to get store info in a popup when clicking on the marker. However when I click the marker it says that it 'can't read undefined when reading setContent'.

Can anyone explain why this won't allow my html to be set into the infoWindow?

var map;
var markers = [];
var infoWindow;
var locationSelect;

let stores = [{
  "recommendation": {},
  "storeNumber": "5758-13907",
  "id": "15051",
  "name": "La Cienega & Gregory Way",
  "phoneNumber": "310-659-9562",
  "coordinates": {
    "latitude": 34.063584,
    "longitude": -118.376354
  },
  "regulations": [],
  "address": {
    "streetAddressLine1": "257 S. La Cienega Blvd.",
    "streetAddressLine2": null,
    "streetAddressLine3": null,
    "city": "Beverly Hills",
    "countrySubdivisionCode": "CA",
    "countryCode": "US",
    "postalCode": "902113301"
  },
  "timeZoneInfo": {
    "currentTimeOffset": -420,
    "windowsTimeZoneId": "Pacific Standard Time",
    "olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
  },
  "brandName": "Starbucks",
  "ownershipTypeCode": "CO",
  "open": true,
  "openStatusText": "Open until 6:00 PM",
  "addressLines": ["257 S. La Cienega Blvd.", "Beverly Hills, CA 90211"],
  "mop": {
    "ready": false,
    "wait": null
  },
  "schedule": [{
    "dayName": "Today",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Tomorrow",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Monday",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Tuesday",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Wednesday",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Thursday",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Friday",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }],
  "features": [{
    "code": "WA",
    "name": "Oven-warmed Food"
  }, {
    "code": "VS",
    "name": "Verismo"
  }, {
    "code": "CD",
    "name": "Mobile Payment"
  }, {
    "code": "DR",
    "name": "Digital Rewards"
  }, {
    "code": "LB",
    "name": "LaBoulange"
  }, {
    "code": "GO",
    "name": "Google Wi-Fi"
  }, {
    "code": "XO",
    "name": "Mobile Order and Pay"
  }, {
    "code": "MX",
    "name": "Music Experience"
  }, {
    "code": "NB",
    "name": "Nitro Cold Brew"
  }, {
    "code": "BE",
    "name": "Blonde Espresso"
  }, {
    "code": "LU",
    "name": "Lunch"
  }, {
    "code": "PS",
    "name": "Playbook Store System"
  }, {
    "code": "WC",
    "name": "Wireless Charging"
  }, {
    "code": "UE",
    "name": "tbd - Uber Eats"
  }],
  "slug": "la-cienega-gregory-way-257-s-la-cienega-blvd-beverly-hills-ca-902113301-u"
}, {
  "recommendation": {},
  "storeNumber": "5577-1851",
  "id": "14753",
  "name": "Fairfax & Olympic",
  "phoneNumber": "(323) 634-7845",
  "coordinates": {
    "latitude": 34.057968,
    "longitude": -118.363715
  },
  "regulations": [],
  "address": {
    "streetAddressLine1": "6066 West Olympic Boulevard",
    "streetAddressLine2": null,
    "streetAddressLine3": null,
    "city": "Los Angeles",
    "countrySubdivisionCode": "CA",
    "countryCode": "US",
    "postalCode": "900364402"
  },
  "timeZoneInfo": {
    "currentTimeOffset": -420,
    "windowsTimeZoneId": "Pacific Standard Time",
    "olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
  },
  "brandName": "Starbucks",
  "ownershipTypeCode": "CO",
  "open": true,
  "openStatusText": "Open until 6:00 PM",
  "addressLines": ["6066 West Olympic Boulevard", "Los Angeles, CA 90036"],
  "mop": {
    "ready": false,
    "wait": null
  },
  "schedule": [{
    "dayName": "Today",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Tomorrow",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Monday",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Tuesday",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Wednesday",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Thursday",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }, {
    "dayName": "Friday",
    "hours": "6:00 AM to 6:00 PM",
    "open": true,
    "holiday": ""
  }],
  "features": [{
    "code": "WA",
    "name": "Oven-warmed Food"
  }, {
    "code": "VS",
    "name": "Verismo"
  }, {
    "code": "CD",
    "name": "Mobile Payment"
  }, {
    "code": "DR",
    "name": "Digital Rewards"
  }, {
    "code": "LB",
    "name": "LaBoulange"
  }, {
    "code": "GO",
    "name": "Google Wi-Fi"
  }, {
    "code": "XO",
    "name": "Mobile Order and Pay"
  }, {
    "code": "MX",
    "name": "Music Experience"
  }, {
    "code": "NB",
    "name": "Nitro Cold Brew"
  }, {
    "code": "BE",
    "name": "Blonde Espresso"
  }, {
    "code": "LU",
    "name": "Lunch"
  }, {
    "code": "PS",
    "name": "Playbook Store System"
  }, {
    "code": "UE",
    "name": "tbd - Uber Eats"
  }],
  "slug": "fairfax-olympic-6066-west-olympic-boulevard-los-angeles-ca-9003644"
}];

function initMap() {
  var losAngeles = {
    lat: 34.063380,
    lng: -118.358080
  };
  map = new google.maps.Map(document.getElementById('map'), {
    center: losAngeles,
    zoom: 11
  });
  showStoreMarkers();
};


function showStoreMarkers() {

  stores.forEach(function(store, index) {
    var latlng = new google.maps.LatLng(
      store.coordinates.latitude,
      store.coordinates.longitude
    );
    var name = store.name;
    var address = store.addressLines[0];
    createMarker(latlng, name, address);
  });
};


function createMarker(latlng, name, address) {
  var html = name;
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  markers.push(marker);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <div id="stores-list" ></div>
    </div>
    <div >
      <div id="map"></div>
    </div>
  </div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBImeeitkm-wI-p8SfcYAjy5UyEpb5ciVA&callback=initMap">
</script>

CodePudding user response：

This works. Pay attention to how I declared infowindow. Also, pay attention as I started my javascript google api call without a callback.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index2</title>

    <script src="https://maps.googleapis.com/maps/api/js?V=3&sensor=false&libraries=places&language=en&key=YOUR-KEY">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            var map;
            var markers = [];
            var infoWindow = new google.maps.InfoWindow({ zIndex: 1000, "maxWidth": 300 });
            var locationSelect;

            let stores = [{
                "recommendation": {},
                "storeNumber": "5758-13907",
                "id": "15051",
                "name": "La Cienega & Gregory Way",
                "phoneNumber": "310-659-9562",
                "coordinates": {
                    "latitude": 34.063584,
                    "longitude": -118.376354
                },
                "regulations": [],
                "address": {
                    "streetAddressLine1": "257 S. La Cienega Blvd.",
                    "streetAddressLine2": null,
                    "streetAddressLine3": null,
                    "city": "Beverly Hills",
                    "countrySubdivisionCode": "CA",
                    "countryCode": "US",
                    "postalCode": "902113301"
                },
                "timeZoneInfo": {
                    "currentTimeOffset": -420,
                    "windowsTimeZoneId": "Pacific Standard Time",
                    "olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
                },
                "brandName": "Starbucks",
                "ownershipTypeCode": "CO",
                "open": true,
                "openStatusText": "Open until 6:00 PM",
                "addressLines": ["257 S. La Cienega Blvd.", "Beverly Hills, CA 90211"],
                "mop": {
                    "ready": false,
                    "wait": null
                },
                "schedule": [{
                    "dayName": "Today",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Tomorrow",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Monday",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Tuesday",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Wednesday",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Thursday",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Friday",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }],
                "features": [{
                    "code": "WA",
                    "name": "Oven-warmed Food"
                }, {
                    "code": "VS",
                    "name": "Verismo"
                }, {
                    "code": "CD",
                    "name": "Mobile Payment"
                }, {
                    "code": "DR",
                    "name": "Digital Rewards"
                }, {
                    "code": "LB",
                    "name": "LaBoulange"
                }, {
                    "code": "GO",
                    "name": "Google Wi-Fi"
                }, {
                    "code": "XO",
                    "name": "Mobile Order and Pay"
                }, {
                    "code": "MX",
                    "name": "Music Experience"
                }, {
                    "code": "NB",
                    "name": "Nitro Cold Brew"
                }, {
                    "code": "BE",
                    "name": "Blonde Espresso"
                }, {
                    "code": "LU",
                    "name": "Lunch"
                }, {
                    "code": "PS",
                    "name": "Playbook Store System"
                }, {
                    "code": "WC",
                    "name": "Wireless Charging"
                }, {
                    "code": "UE",
                    "name": "tbd - Uber Eats"
                }],
                "slug": "la-cienega-gregory-way-257-s-la-cienega-blvd-beverly-hills-ca-902113301-u"
            }, {
                "recommendation": {},
                "storeNumber": "5577-1851",
                "id": "14753",
                "name": "Fairfax & Olympic",
                "phoneNumber": "(323) 634-7845",
                "coordinates": {
                    "latitude": 34.057968,
                    "longitude": -118.363715
                },
                "regulations": [],
                "address": {
                    "streetAddressLine1": "6066 West Olympic Boulevard",
                    "streetAddressLine2": null,
                    "streetAddressLine3": null,
                    "city": "Los Angeles",
                    "countrySubdivisionCode": "CA",
                    "countryCode": "US",
                    "postalCode": "900364402"
                },
                "timeZoneInfo": {
                    "currentTimeOffset": -420,
                    "windowsTimeZoneId": "Pacific Standard Time",
                    "olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
                },
                "brandName": "Starbucks",
                "ownershipTypeCode": "CO",
                "open": true,
                "openStatusText": "Open until 6:00 PM",
                "addressLines": ["6066 West Olympic Boulevard", "Los Angeles, CA 90036"],
                "mop": {
                    "ready": false,
                    "wait": null
                },
                "schedule": [{
                    "dayName": "Today",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Tomorrow",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Monday",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Tuesday",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Wednesday",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Thursday",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }, {
                    "dayName": "Friday",
                    "hours": "6:00 AM to 6:00 PM",
                    "open": true,
                    "holiday": ""
                }],
                "features": [{
                    "code": "WA",
                    "name": "Oven-warmed Food"
                }, {
                    "code": "VS",
                    "name": "Verismo"
                }, {
                    "code": "CD",
                    "name": "Mobile Payment"
                }, {
                    "code": "DR",
                    "name": "Digital Rewards"
                }, {
                    "code": "LB",
                    "name": "LaBoulange"
                }, {
                    "code": "GO",
                    "name": "Google Wi-Fi"
                }, {
                    "code": "XO",
                    "name": "Mobile Order and Pay"
                }, {
                    "code": "MX",
                    "name": "Music Experience"
                }, {
                    "code": "NB",
                    "name": "Nitro Cold Brew"
                }, {
                    "code": "BE",
                    "name": "Blonde Espresso"
                }, {
                    "code": "LU",
                    "name": "Lunch"
                }, {
                    "code": "PS",
                    "name": "Playbook Store System"
                }, {
                    "code": "UE",
                    "name": "tbd - Uber Eats"
                }],
                "slug": "fairfax-olympic-6066-west-olympic-boulevard-los-angeles-ca-9003644"
            }];

            var losAngeles = { lat: 34.063380, lng: -118.358080 };

            map = new google.maps.Map(document.getElementById('map'), {
                center: losAngeles,
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            showStoreMarkers();

            function showStoreMarkers() {
                stores.forEach(function (store, index) {
                    var latlng = new google.maps.LatLng(
                        store.coordinates.latitude,
                        store.coordinates.longitude
                    );
                    var name = store.name;
                    var address = store.addressLines[0];
                    createMarker(latlng, name, address);
                });
            };


            function createMarker(latlng, name, address) {
                var html = name;
                var marker = new google.maps.Marker({
                    map: map,
                    position: latlng
                });
                google.maps.event.addListener(marker, 'click', function () {
                    infoWindow.setContent(html);
                    infoWindow.open(map, marker);
                });
                markers.push(marker);
            };
        });
    </script>
</head>
<body>
    <div style="height: 535px; overflow-x: hidden" id="map">hello map1</div>
    <div >
        <div >
            <div >
                <div id="stores-list" ></div>
            </div>
            <div >

            </div>
        </div>
    </div>


</body>
</html>

Page link：https//www.codepudding.com/other/334870.html

Prev:Call two async functions in a row within React app
Next:use a second style.css file for a specific html block
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding