MapExample.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="utf-8">
    <style>
      /*html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }*/
       html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="jquery-1.11.1.min.js"></script>
    <!-- <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzk427UkCDu0YqwZKEY0hh_5685wBXykY&sensor=fales">
    </script> -->
    
    <script type="text/javascript">
    var geocoder;
    var map;
    var TheaterAddress =  [
                        "700 South Main Street, Sharon, MA", // Latitude : 42.094707 | Longitude : -71.219491
                        "24 Patriot Place, Foxboro, MA", // Latitude : 42.094218 | Longitude : -71.26565
                        "640 South Washington Street, North Attleboro, MA", // Latitude : 41.954466 | Longitude : -71.341838
                        "2 Galleria Mall Drive, Taunton, MA", // Latitude : 41.864427 | Longitude : -71.051431
                        "207 Swansea Mall Drive, Swansea, MA", // //Latitude : 41.756302 | Longitude : -71.217185
                        "100 Commerce Way, Seekonk, MA", // Latitude : 41.797065 | Longitude : -71.323079
                        "652 East Washington St., North Attleboro, MA", // Latitude : 41.985304 | Longitude : -71.326971
                        "60 Newport Avenue, Rumford, RI", // Latitude : 41.857816 | Longitude : -71.351147
                        "73 Mazzeo Drive, Randolph, MA" // Latitude : 42.163113 | Longitude : -71.061668
                      ];

      function initialize() {
        geocoder = new google.maps.Geocoder();
        var myLatlng = new google.maps.LatLng(39.571822, -98.964844);
        var mapOptions = {
          zoom: 3,
          center: myLatlng
        }; // ends Mapoption
      
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        
        // $.getJSON("http://infinite-citadel-8572.herokuapp.com/api/0.1/showings/", function( showingData ){
        //     console.log("Got Showings Data!")
        //     for (var i = 0; i < showingData.length; i++) {
        //       //geocodeThatAddress(data[i]);
        //       getVenueData(showingData[i]);
        //     }; // ends for loop
        // }); // ends function

        $.getJSON("http://infinite-citadel-8572.herokuapp.com/api/0.1/showings/", function( showingData ){
            console.log("Got Showings Data!");
            $.getJSON("http://infinite-citadel-8572.herokuapp.com/api/0.1/venues/" , function( venueData ){
              console.log("Got Venues Data!");
              $.getJSON("http://infinite-citadel-8572.herokuapp.com/api/0.1/features/", function(featureData){
                console.log("Got Features Data!");
                for (var i = 0; i < showingData.length; i++) {
                  for (var n = 0; n < venueData.length; n++) {
                    if (showingData[i].venue_id === venueData[n]._id) {
                      var veuneDataIndex = venueData[n];
                      break;
                    }; // ends if
                  }; // ends for
                  for (var x = 0; x < featureData.length; x++) {
                    if (showingData[i].feature_id === featureData[x]._id) {
                      //console.log(showingData[i].feature_id);
                      var featureDataIndex = featureData[x];
                      break;
                    }; // ends if 
                  }; // ends second 
                  //geocodeThatAddress(showingData[i], veuneDataIndex, featureDataIndex);
                  //RandomPlacement(showingData[i], veuneDataIndex, featureDataIndex);
                  placementOfVenues(showingData[i], veuneDataIndex, featureDataIndex);

                }; // ends large for loop

              }); // ends featureData
            }); // ends venueData
        }); // ends showingData
      
      };// ends initialize
      
        // for (var i = 0; i < TheaterAddress.length; i++) {
        //   geocodeThatAddress(TheaterAddress[i])
        // };

        function getVenueData (showing) {
          //console.log("http://infinite-citadel-8572.herokuapp.com/api/0.1/venues/" + showing.venue_id);
          $.getJSON("http://infinite-citadel-8572.herokuapp.com/api/0.1/venues/" + showing.venue_id, function( veuneData ){
            getFeatureData(showing, veuneData);
          });
        };

        function getFeatureData (showing, veuneData) {
          //console.log("http://infinite-citadel-8572.herokuapp.com/api/0.1/features/" + showing.feature_id);
          $.getJSON("http://infinite-citadel-8572.herokuapp.com/api/0.1/features/" + showing.feature_id, function(featureData){
            geocodeThatAddress(showing, veuneData, featureData);
          });
        };



        // To add the marker to the map, use the 'map' property
        // var maxLat = 90;
        // var minLat = -90;
        // var maxLong = 180;
        // var minLong = -180;

        // for (var i = 0; i < 100; i++) {
        //   var Lat = (Math.random() * (maxLat - minLat) + minLat);
        //   var Long = (Math.random() * (maxLong - minLong) + minLong);
        //   var myLatlng = new google.maps.LatLng(Lat, Long);

        //   var marker = new google.maps.Marker({
        //     position: myLatlng,
        //     map: map,
        //     title: "Latitude: "+ Lat + " Lonitude: " + Long 
        //   }); // ends Marker 
        // }; // ends for loop   
      //};// end function
      

      // function codeAddress() {
      //   var address = document.getElementById("address").value;
      //   geocoder.geocode( { 'address': address}, function(results, status) {
      //     if (status == google.maps.GeocoderStatus.OK) {
      //       map.setCenter(results[0].geometry.location);
      //       var marker = new google.maps.Marker({
      //         map: map,
      //         position: results[0].geometry.location
      //       });
      //     } 
      //     else {
      //       alert("Geocode was not successful for the following reason: " + status);
      //     }
      //   });
      // }

      function placementOfVenues (showing, venueData, featureData) {
        var myLatlng = new google.maps.LatLng(venueData.geocode.latitude, venueData.geocode.longitude);
        console.log(myLatlng);

        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: "Theater name: " + venueData.name + " || Address: " + venueData.address.street + " " + venueData.address.city + " " + venueData.address.state + " || Feature: " + featureData.title + " || Show Time: " + showing.showtime 

        }); // ends Marker 
        
      };


      // function RandomPlacement (showing, venueData, featureData) {
      //   var maxLat = 90;
      //   var minLat = -90;
      //   var maxLong = 180;
      //   var minLong = -180;
       
      //   var Lat = (Math.random() * (maxLat - minLat) + minLat);
      //   var Long = (Math.random() * (maxLong - minLong) + minLong);
      //   var myLatlng = new google.maps.LatLng(Lat, Long);
      //   console.log(myLatlng);

      //   var marker = new google.maps.Marker({
      //     position: myLatlng,
      //     map: map,
      //     title: "Theater name: " + venueData.name + " || Address: " + venueData.address.street + " " + venueData.address.city + " " + venueData.address.state + " || Feature: " + featureData.title + " || Show Time: " + showing.showtime 

      //   }); // ends Marker 
        
      // };


      function geocodeThatAddress(showing, venueData, featureData) {
        //console.log(showing);
        // if (veuneData.address.city === "Randolph"){
        //   console.log(veuneData);
        // }
          console.log(venueData.address.city);
          geocoder.geocode( {'address' : venueData.address.street +" "+ venueData.address.city +" "+ venueData.address.state}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
             map.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: "Theater name: " + venueData.name + " || Address: " + venueData.address.street + " " + venueData.address.city + " " + venueData.address.state + " || Feature: " + featureData.title + " || Show Time: " + showing.showtime 
              });
            } 
          else {
            alert("Geocode was not successful for the following reason: " + status);
          }
        });
      }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  
  </head>
    <body>
      <div id="panel">
        <!-- <input id="address" type="textbox" value="Sydney, NSW"> -->
        <input type="button" value="Geocode" onclick="codeAddress()">
      </div>
      <div id="map-canvas"></div>
    </body>
</html>