we gotta figure out how to get the data for the markers within our sp…

…ecified range (within the number of miles from our current location)

html-ONLY-site/map.html

@@ -111,4 +111,11 @@ <h2>Well Name</h2>
     </script>
 </body>
 
+
 </html>
+// notes :
+
+
+
+// we will need a file where we import the well name, address, longiture and latitude within the range we chose
+// we need a food loop for it

maps.js

@@ -0,0 +1,84 @@
+var map;
+var infoWindow;
+
+// markersData variable stores the information necessary to each marker
+// figure out a way to import mapData
+
+
+function initialize() {
+   var mapOptions = {
+      center: new google.maps.LatLng(40.601203,-8.668173),
+      zoom: 9,
+      mapTypeId: 'roadmap',
+   };
+
+   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
+
+   // a new Info Window is created
+   infoWindow = new google.maps.InfoWindow();
+
+   // Event that closes the Info Window with a click on the map
+   google.maps.event.addListener(map, 'click', function() {
+      infoWindow.close();
+   });
+
+   // Finally displayMarkers() function is called to begin the markers creation
+   displayMarkers();
+}
+google.maps.event.addDomListener(window, 'load', initialize);
+
+
+// This function will iterate over markersData array
+// creating markers with createMarker function
+function displayMarkers(){
+
+   // this variable sets the map bounds according to markers position
+   var bounds = new google.maps.LatLngBounds();
+
+   // for loop traverses markersData array calling createMarker function for each marker
+   for (var i = 0; i < markersData.length; i++){
+
+      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
+      var name = markersData[i].name;
+      var address1 = markersData[i].address1;
+      var address2 = markersData[i].address2;
+      var postalCode = markersData[i].postalCode;
+
+      createMarker(latlng, name, address1, address2, postalCode);
+
+      // marker position is added to bounds variable
+      bounds.extend(latlng);
+   }
+
+   // Finally the bounds variable is used to set the map bounds
+   // with fitBounds() function
+   map.fitBounds(bounds);
+}
+
+// This function creates each marker and it sets their Info Window content
+function createMarker(latlng, name, address1, address2, postalCode){
+   var marker = new google.maps.Marker({
+      map: map,
+      position: latlng,
+      title: name
+   });
+
+   // This event expects a click on a marker
+   // When this event is fired the Info Window content is created
+   // and the Info Window is opened.
+   google.maps.event.addListener(marker, 'click', function() {
+
+      // Creating the content to be inserted in the infowindow
+      var iwContent = '<div id="iw_container">' +
+            '<div class="iw_title">' + name + '</div>' +
+         '<div class="iw_content">' + address1 + '<br />' +
+         address2 + '<br />' +
+         postalCode + '</div></div>';
+
+      // including content to the Info Window.
+      infoWindow.setContent(iwContent);
+
+      // opening the Info Window in the current map and at the current marker location.
+      infoWindow.open(map, marker);
+   });
+}