Trouble with accessing array of data in Javascript
Question
I'm trying to write a little web app that will map some locations on a map using Google's Maps JavaScript API. Working with the API is going well, but I'm trying to manipulate their example code and I cannot get the array of data to work unless it's declared withing the Map initialization function. I've been digging for what I am not understanding about Javascript variable access, but I can't figure it out. Ideally I would like to put the array of data in a separate <script> tag so I can load it from another file, but I can't even get the data to work if placed right above the function within the same <script> tag.
I here is a simplified version of the code that I cannot get to work. It won't run because I removed my key from the call to the API, but if that's needed to find the problem I can give it out too.
<html> <head> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; width: 100%; } </style> </head> <body> <div id="map"></div> // <script src="..."> // where I really want to load let locations =.... from a file // </script> <script> // where i tried to move let locations =.... without success function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 2.7, center: new google.maps.LatLng(18,0) }); let locations = [ { name: 'MJ Cave', position: new google.maps.LatLng(47.517869, 19.036026) }, { name: 'Protec Tulum', position: new google.maps.LatLng(20.216557, -87.460052) }, { name: 'Giraffe Manor', position: new google.maps.LatLng(-1.375528, 36.744634) } ]; function placeMarker( loc ) { const marker = new google.maps.Marker({ position: loc.position, map: map }); } // ITERATE ALL LOCATIONS. Pass every location to placeMarker locations.forEach( placeMarker ); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"> </script> </body> </html>
1 answers
solution1
0 ACCPTED 2020-05-02 19:56:46
Problem solved.
Taking the new google.maps.latlng() calls out of the initMap() function was the problem because that datatype isn't necessarily defined at the time that code runs apparently. Changed the location position object to be defined by an array of two numbers and then made them into a google.maps.latlng in function. Works as desired now. For postarity here's my changed code:
<script> let locations = [ { name: 'MJ Cave', position: [47.517869, 19.036026] }, { name: 'Protec Tulum', position: [20.216557, -87.460052] }, { name: 'Giraffe Manor', position: [-1.375528, 36.744634] } ]; </script> <script type="text/javascript"> function initMap() { const infowindow = new google.maps.InfoWindow(); const map = new google.maps.Map(document.getElementById("map"), { zoom: 2.7, center: new google.maps.LatLng(18,0) }); function placeMarker( loc ) { const marker = new google.maps.Marker({ position: { lat: loc.position[0], lng: loc.position[1]}, icon: icons[loc.type].icon, map: map }); // ITERATE ALL LOCATIONS. Pass every location to placeMarker locations.forEach( placeMarker ); } </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.