CODEWITHSUNDEEP
javascripthtmlcssapigoogle-maps
I can do it
I can do it

Reputation: 65

I Need Help Looping Fake Locations On Google Maps Api

Hi i need help to keeping my code DRY, I'm using google map API, and I'm using the feature that they give that makes info windows, I'm working on a school project so i don't have the API for golf courses locations, it cost money and this is just for a school project not a business, so that why i want to loop this to make various location nation USA wide about golf courses.

i have made a huge Json file with fake info for some golf courses, and I want to know if you guys have any idea on how to loop this example and implement my json addresses into google map API so when i open my page it will show drop points on the map with the information and website to visit the golf course site.

this what I'm using for the page, the altitude and logitude has been change to show a country club in Palm Desert CA, dont worry about the text info is just an example, just need to see if anyone can help me to loop this with the info i made up from 10 country clubs i got on another info Json file i made up.

thanks for reading and hope the comunity can help thanks

function initMap() {
  var uluru = {
    lat: 33.745990,
    lng: -116.315722
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the ' +
    'Northern Territory, .</p>' +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
    '(last visited June 22, 2009).</p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Info windows</title>
</head>

<body>
  <div id="map"></div>
  <script>
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
</body>

</html>

Upvotes: 0

Views: 389

Answers (1)

xtrinch
xtrinch

Reputation: 2281

If you don't have access to a web server that could serve your json file, the easiest way is to adapt your json to be inside a javascript variable:

var locations = [{
    "name": "Uluru",
    "description": "Also known as Ayers rock",
    "lat": "33.745990",
    "lon": "-116.315722"
}, {
    "name": "Mt. Everest", 
    "description": "Located in the himalayas",
    "lat": "33.745990",
    "lon": "-116.315722"   
}];

Put as many as you like, put them inside a script file (eg. places.js) and include them as you would any other javascript file in the head of your HTML.

You can then use that variable in your main script file, loop through the JSON array and add markers for every one.

for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].lat, locations[i].lon),
        map: map,
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i].description);
          infowindow.open(map, marker);
        }
      })(marker, i));
}

EDIT: here's an example using your code from the snippet:

function initMap() {
var locations = [{
    "name": "Uluru",
    "description": "Also known as Ayers rock",
    "lat": "33.745990",
    "lon": "-116.215622"
}, {
    "name": "Mt. Everest", 
    "description": "Located in the himalayas",
    "lat": "33.746990",
    "lon": "-116.315722"   
}];
  var uluru = {
    lat: 33.745990,
    lng: -116.315722
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the ' +
    'Northern Territory, .</p>' +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
    '(last visited June 22, 2009).</p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  for (i = 0; i < locations.length; i++) {  

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i].lat, locations[i].lon),
    map: map,
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i].description);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #000;
  border: 2px solid #000;
}
#map {
  height: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Info windows</title>
</head>

<body>
  <div id="map"></div>
  <script>
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
</body>

</html>

Upvotes: 1

Related Questions