Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## Map with Several Markers

Now let's use JSON data to add several markers to a page.

Map with Ivy Schools from JSON Data - Live Example

The JSON data (schools.json) we'll use is a list of schools in the Ivy League -- which contains a latitude, longitude, name, and URL.

We'll use jQuery to get the JSON data, and we'll use the Google Maps API to create the map. The full code is shown below, but the key part to creating the markers is where iterate through the list of schools:

     for (var i in school_list) {
      var school = school_list[i];
      var mylatlng = new google.maps.LatLng(school.lat, school.lng);
      var marker = new google.maps.Marker({
                                           position: mylatlng,
                                           map: ivy_map,
                                           title: "school.name"
                                          });
    }

Full code:

Copyright © David Heitmeyer