mikeadeleke/gist:77879bfe4fc02e18b324

## gistfile1.txt
<div class="row">
  <div class="col-md-6">
    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 600px;
        padding: 0px;
        position: relative;
        overflow: hidden;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script>
    var listings = []; // initialize empty array
    <% @recent_listings.each do |listing| %>
    listings.push(["<%= listing.property.address %>", "<%= listing.property.latitude %>", "<%= listing.property.longitude %>", 1 ]);
    <% end %>
// The following example creates complex markers to indicate listinges near
// Sydney, NSW, Australia. Note that the anchor is set to
// (0,32) to correspond to the base of the flagpole.

function initialize() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(39.9560414, -75.1877961)
  }

  window.map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);

  setMarkers(map, listings);
}
/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */


function setMarkers(map, listings) { // our locations becomes "listings"
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = {
    url: '<%= asset_url "1.png" %>',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(20, 32),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon.
  // The type defines an HTML &lt;area&gt; element 'poly' which
  // traces out a polygon as a series of X,Y points. The final
  // coordinate closes the poly by connecting to the first
  // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
for (var i = 0; i < listings.length; i++) { // iterate through all the listings
    var listing = listings[i];
    var myLatLng = new google.maps.LatLng(listing[1], listing[2]); // listings[1], listings[2]
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: listing[0],
        zIndex: listing[3]
    });
    google.maps.event.addListener(marker, 'mouseover', function() {
      tooltip(marker, listing);
      updateListingView(listing);
      $('.listing-row').each(function(key, value){
        console.log($(value).find('.listing-title').html());
        if ($(value).find('.listing-title').html() == marker.title)
          alert("html title is "+$(value).find('.listing-title').html()),
          alert("Google Title is "+marker.title),
           $(this).css('border-color', '#025488'),
           $(this).css('background-color', '#DBFEF8')
        else
           $(this).css('border-color', 'none'),
           $(this).css('background-color', 'none');

      });
      console.log(marker);
    });

    google.maps.event.addListener(marker, 'mouseout', function() {
      $('.listing-row').each(function(key, value){
        console.log($(value).find('.listing-title').html());
        if ($(value).find('.listing-title').html() == marker.title)
           $(this).css('border-color', 'none');
        else
           $(this).css('border-color', 'none');
           $(this).css('background-color', 'none')
      });
      console.log(marker);
    });
  }
}


function tooltip (marker, listing) {
    var data = listing;
    var infowindow = new google.maps.InfoWindow({
      content: data[0]
    });
    google.maps.event.addListener(marker, 'mouseover', function() {
      infowindow.open(map,marker);
    });
}

function updateListingView(listing) {
    $("[data-group=' + listing.id + ']").addClass("selected-bounding-box")
    // scroll view to the selected listing

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

  </head>
  <body data-spy="scroll" data-target=".navbar">
    <div id="map-canvas"></div>
  </body>
</html>
  </div>
  <div class="col-md-6">
    <% @recent_listings.each do |listing| %>
     <div class="listing-row" id="theElement">
      <% if listing.property %>
        <p><%= link_to image_tag(listing.property.images.first.photo_url(:thumb)), listing %></p>
      <% else %>
      <% end %>
      <ul>
        <li><h4><%= listing.property.title %></h4></li>
        <li class="listing-title"><%= listing.property.address %></li>
        <li><h4><%= number_to_currency(listing.rent_per_month) %> per month</h4></li>
      </ul>
    </div>
    <% end %>
  </div>
</div>
	<div class="row">
	<div class="col-md-6">
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
	html, body, #map-canvas {
	height: 600px;
	padding: 0px;
	position: relative;
	overflow: hidden;
	}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

	<script>
	var listings = []; // initialize empty array
	<% @recent_listings.each do \|listing\| %>
	listings.push(["<%= listing.property.address %>", "<%= listing.property.latitude %>", "<%= listing.property.longitude %>", 1 ]);
	<% end %>
	// The following example creates complex markers to indicate listinges near
	// Sydney, NSW, Australia. Note that the anchor is set to
	// (0,32) to correspond to the base of the flagpole.

	function initialize() {
	var mapOptions = {
	zoom: 15,
	center: new google.maps.LatLng(39.9560414, -75.1877961)
	}

	window.map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	setMarkers(map, listings);
	}
	/**
	* Data for the markers consisting of a name, a LatLng and a zIndex for
	* the order in which these markers should display on top of each
	* other.
	*/


	function setMarkers(map, listings) { // our locations becomes "listings"
	// Add markers to the map

	// Marker sizes are expressed as a Size of X,Y
	// where the origin of the image (0,0) is located
	// in the top left of the image.

	// Origins, anchor positions and coordinates of the marker
	// increase in the X direction to the right and in
	// the Y direction down.
	var image = {
	url: '<%= asset_url "1.png" %>',
	// This marker is 20 pixels wide by 32 pixels tall.
	size: new google.maps.Size(20, 32),
	// The origin for this image is 0,0.
	origin: new google.maps.Point(0,0),
	// The anchor for this image is the base of the flagpole at 0,32.
	anchor: new google.maps.Point(0, 32)
	};
	// Shapes define the clickable region of the icon.
	// The type defines an HTML <area> element 'poly' which
	// traces out a polygon as a series of X,Y points. The final
	// coordinate closes the poly by connecting to the first
	// coordinate.
	var shape = {
	coord: [1, 1, 1, 20, 18, 20, 18 , 1],
	type: 'poly'
	};
	for (var i = 0; i < listings.length; i++) { // iterate through all the listings
	var listing = listings[i];
	var myLatLng = new google.maps.LatLng(listing[1], listing[2]); // listings[1], listings[2]
	var marker = new google.maps.Marker({
	position: myLatLng,
	map: map,
	icon: image,
	shape: shape,
	title: listing[0],
	zIndex: listing[3]
	});
	google.maps.event.addListener(marker, 'mouseover', function() {
	tooltip(marker, listing);
	updateListingView(listing);
	$('.listing-row').each(function(key, value){
	console.log($(value).find('.listing-title').html());
	if ($(value).find('.listing-title').html() == marker.title)
	alert("html title is "+$(value).find('.listing-title').html()),
	alert("Google Title is "+marker.title),
	$(this).css('border-color', '#025488'),
	$(this).css('background-color', '#DBFEF8')
	else
	$(this).css('border-color', 'none'),
	$(this).css('background-color', 'none');

	});
	console.log(marker);
	});

	google.maps.event.addListener(marker, 'mouseout', function() {
	$('.listing-row').each(function(key, value){
	console.log($(value).find('.listing-title').html());
	if ($(value).find('.listing-title').html() == marker.title)
	$(this).css('border-color', 'none');
	else
	$(this).css('border-color', 'none');
	$(this).css('background-color', 'none')
	});
	console.log(marker);
	});
	}
	}


	function tooltip (marker, listing) {
	var data = listing;
	var infowindow = new google.maps.InfoWindow({
	content: data[0]
	});
	google.maps.event.addListener(marker, 'mouseover', function() {
	infowindow.open(map,marker);
	});
	}

	function updateListingView(listing) {
	$("[data-group=' + listing.id + ']").addClass("selected-bounding-box")
	// scroll view to the selected listing

	}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>

	</head>
	<body data-spy="scroll" data-target=".navbar">
	<div id="map-canvas"></div>
	</body>
	</html>
	</div>
	<div class="col-md-6">
	<% @recent_listings.each do \|listing\| %>
	<div class="listing-row" id="theElement">
	<% if listing.property %>
	<p><%= link_to image_tag(listing.property.images.first.photo_url(:thumb)), listing %></p>
	<% else %>
	<% end %>
	<ul>
	<li><h4><%= listing.property.title %></h4></li>
	<li class="listing-title"><%= listing.property.address %></li>
	<li><h4><%= number_to_currency(listing.rent_per_month) %> per month</h4></li>
	</ul>
	</div>
	<% end %>
	</div>
	</div>