landsurveyorsunited/Hnxju.markdown

## Hnxju.markdown

      
    Raw
  

              Hnxju.markdown
            
          
    Hnxju

A Pen by JFarrow on CodePen.
License.

  
## index.html
<html>
  <head>
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
	    google.load('maps', '3.4',  {other_params:'sensor=false'});
	    google.load('jquery', '1.6.0');
	    google.load("jqueryui", "1.8.12");
    </script>
  <style>
    #map-canvas { width:100%; height:400px; }
    .layer-wizard-search-label { font-family: sans-serif };
  </style>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    var map;
    var layer_0;
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(26.25454504994405, -7.47462500000006),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      layer_0 = new google.maps.FusionTablesLayer({
        query: {
          select: "col4",
          from: "1woYnbE7ZAFtle3b9K7FI5BPD3XKXNbsVkbp0PwKZ"
        },
        map: map,
        styleId: 2,
        templateId: 3
      });
    }
    function changeMap_0() {
      var whereClause;
      var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
      if (searchString != '--Select--') {
        whereClause = "'Location' CONTAINS IGNORING CASE '" + searchString + "'";
      }
      layer_0.setOptions({
        query: {
          select: "col4",
          from: "1woYnbE7ZAFtle3b9K7FI5BPD3XKXNbsVkbp0PwKZ",
          where: whereClause
        }
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div style="margin-top: 10px;">
      <label class="layer-wizard-search-label">
        Location
        <input type="text" id="search-string_0">
        <input type="button" onclick="changeMap_0()" value="Search">
      </label>
    </div>
  </body>

## script.js
var mapCanvas, layer, infoWnd;
      var ftTableId = "1woYnbE7ZAFtle3b9K7FI5BPD3XKXNbsVkbp0PwKZ";

      function init_map() {
        /*
         * (2)Initalize a map.
         */
        var mapDiv = document.getElementById("map_canvas");
        mapCanvas = new google.maps.Map(mapDiv, {
          mapTypeId : google.maps.MapTypeId.ROADMAP
        });

        // (2) Create an info window instead of fusion tables layer's infowindow.
        infoWnd = new google.maps.InfoWindow();

        // (3) Create a fusion tables layer.
        layer = new google.maps.FusionTablesLayer({
          query : {
            select : "Name",
            from : ftTableId
          },
          map : mapCanvas,

          //Important!
          suppressInfoWindows : true
        });

        // (7)Open the info window when the layer is clicked.
        google.maps.event.addListener(layer, "click", function(evt) {
          openInfoWindow(evt);
        });


        /*
         * (4)Load data from the fusion tables using google-javascript-apis-library.
         * https://developers.google.com/fusiontables/
         */
        var request = gapi.client.fusiontables.query.sqlGet({
          'sql': 'select * from ' + ftTableId
        });

        /*
         * (5)Parse the response, then create FusionTablesMouseEvents.
         * https://developers.google.com/maps/documentation/javascript/3.exp/reference#FusionTablesMouseEvent
         */
        request.execute(function(response) {
          var bounds = new google.maps.LatLngBounds();
          var pixelOffset = new google.maps.Size(0, -16, "px", "px");

          var j, columnName, latLng;
          for (var i in response.rows) {
            var row = {};
            for (j = 0; j < response.columns.length; j++) {
              columnName = response.columns[j];
              row[columnName] = {
                "columnName" : columnName,
                "value" : response.rows[i][j]
              };
            }
            ftMouseEvt = {
              row : row,
              pixelOffset : pixelOffset,
              latLng : new google.maps.LatLng(row.latitude.value, row.longtiude.value)
            };
            addListItem(ftMouseEvt);

            bounds.extend(ftMouseEvt.latLng);
          }

          // Display the map
          mapCanvas.fitBounds(bounds);
        });
      }

      /*
       * (6)Create a list item, then add to the list div.
       */
      function addListItem(info) {
        //Create a list item.
        var btn = document.createElement("div");
        btn.setAttribute("class", "listItem");
        btn.innerHTML = info.row.location.value;

        //Append to the list div.
        var list = document.getElementById("list");
        list.appendChild(btn);

        //Open the info window when the item is clicked.
        google.maps.event.addDomListener(btn, "click", function() {
          openInfoWindow(info);
        });
      }

      /*
       * Open the info window
       */
      function openInfoWindow(ftMouseEvt) {
        var html = [];
        html.push("<table class='ftTable'>");
        for (var field in ftMouseEvt.row) {
          html.push("<tr><th>" + field + "</th><td>" + ftMouseEvt.row[field].value + "</td></tr>");
        }
        html.push("</table>");
        infoWnd.setOptions({
          content : html.join(""),
          position : ftMouseEvt.latLng,
          pixelOffset : ftMouseEvt.pixelOffset
        });
        infoWnd.open(mapCanvas);
      }


      /*
       * (1)Initialize the google-api-javascript-client library.
       */
      function init_api_client() {
        gapi.client.setApiKey('AIzaSyDxSkKsMgiZTaiDTyswwiy5vQElYeOe_Ac');
        gapi.client.load('fusiontables', 'v1', init_map);
      }
var infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(layer, 'click', function(e) {
          // Construct the info window content using the
          // data from the MouseEvent object. This is data
          // from the Fusion Table.
          var contentString = [
            '<div class="tabs">',
            '<ul>',
              '<li><a href="#tab-1"><span>Name</span></a></li>',
              '<li><a href="#tab-2"><span>About</span></a></li>',
            '</ul>',
            '<div id="tab-1">',
              '<p>' + e.row['name'].value + '</p>',
            '</div>',
            '<div id="tab-2">',
             '<p>' + e.row['location'].value + '</p>',
            '</div>',
            '</div>'
          ].join('');

          infowindow.setContent(contentString);
          infowindow.setPosition(e.latLng);
          infowindow.open(map);
          $(".tabs").tabs({ selected: 0 });
        });


## style.css
.googft-info-window  { background-color: #1b1b1b;color:#fff; }
.googft-info-window a { color:#e74c3c; }
	<html>
	<head>
	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load('maps', '3.4', {other_params:'sensor=false'});
	google.load('jquery', '1.6.0');
	google.load("jqueryui", "1.8.12");
	</script>
	<style>
	#map-canvas { width:100%; height:400px; }
	.layer-wizard-search-label { font-family: sans-serif };
	</style>
	<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false">
	</script>
	<script type="text/javascript">
	var map;
	var layer_0;
	function initialize() {
	map = new google.maps.Map(document.getElementById('map-canvas'), {
	center: new google.maps.LatLng(26.25454504994405, -7.47462500000006),
	zoom: 3,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	layer_0 = new google.maps.FusionTablesLayer({
	query: {
	select: "col4",
	from: "1woYnbE7ZAFtle3b9K7FI5BPD3XKXNbsVkbp0PwKZ"
	},
	map: map,
	styleId: 2,
	templateId: 3
	});
	}
	function changeMap_0() {
	var whereClause;
	var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
	if (searchString != '--Select--') {
	whereClause = "'Location' CONTAINS IGNORING CASE '" + searchString + "'";
	}
	layer_0.setOptions({
	query: {
	select: "col4",
	from: "1woYnbE7ZAFtle3b9K7FI5BPD3XKXNbsVkbp0PwKZ",
	where: whereClause
	}
	});
	}
	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>
	<div id="map-canvas"></div>
	<div style="margin-top: 10px;">
	<label class="layer-wizard-search-label">
	Location
	<input type="text" id="search-string_0">
	<input type="button" onclick="changeMap_0()" value="Search">
	</label>
	</div>
	</body>
	var mapCanvas, layer, infoWnd;
	var ftTableId = "1woYnbE7ZAFtle3b9K7FI5BPD3XKXNbsVkbp0PwKZ";

	function init_map() {
	/*
	* (2)Initalize a map.
	*/
	var mapDiv = document.getElementById("map_canvas");
	mapCanvas = new google.maps.Map(mapDiv, {
	mapTypeId : google.maps.MapTypeId.ROADMAP
	});

	// (2) Create an info window instead of fusion tables layer's infowindow.
	infoWnd = new google.maps.InfoWindow();

	// (3) Create a fusion tables layer.
	layer = new google.maps.FusionTablesLayer({
	query : {
	select : "Name",
	from : ftTableId
	},
	map : mapCanvas,

	//Important!
	suppressInfoWindows : true
	});

	// (7)Open the info window when the layer is clicked.
	google.maps.event.addListener(layer, "click", function(evt) {
	openInfoWindow(evt);
	});


	/*
	* (4)Load data from the fusion tables using google-javascript-apis-library.
	* https://developers.google.com/fusiontables/
	*/
	var request = gapi.client.fusiontables.query.sqlGet({
	'sql': 'select * from ' + ftTableId
	});

	/*
	* (5)Parse the response, then create FusionTablesMouseEvents.
	* https://developers.google.com/maps/documentation/javascript/3.exp/reference#FusionTablesMouseEvent
	*/
	request.execute(function(response) {
	var bounds = new google.maps.LatLngBounds();
	var pixelOffset = new google.maps.Size(0, -16, "px", "px");

	var j, columnName, latLng;
	for (var i in response.rows) {
	var row = {};
	for (j = 0; j < response.columns.length; j++) {
	columnName = response.columns[j];
	row[columnName] = {
	"columnName" : columnName,
	"value" : response.rows[i][j]
	};
	}
	ftMouseEvt = {
	row : row,
	pixelOffset : pixelOffset,
	latLng : new google.maps.LatLng(row.latitude.value, row.longtiude.value)
	};
	addListItem(ftMouseEvt);

	bounds.extend(ftMouseEvt.latLng);
	}

	// Display the map
	mapCanvas.fitBounds(bounds);
	});
	}

	/*
	* (6)Create a list item, then add to the list div.
	*/
	function addListItem(info) {
	//Create a list item.
	var btn = document.createElement("div");
	btn.setAttribute("class", "listItem");
	btn.innerHTML = info.row.location.value;

	//Append to the list div.
	var list = document.getElementById("list");
	list.appendChild(btn);

	//Open the info window when the item is clicked.
	google.maps.event.addDomListener(btn, "click", function() {
	openInfoWindow(info);
	});
	}

	/*
	* Open the info window
	*/
	function openInfoWindow(ftMouseEvt) {
	var html = [];
	html.push("<table class='ftTable'>");
	for (var field in ftMouseEvt.row) {
	html.push("<tr><th>" + field + "</th><td>" + ftMouseEvt.row[field].value + "</td></tr>");
	}
	html.push("</table>");
	infoWnd.setOptions({
	content : html.join(""),
	position : ftMouseEvt.latLng,
	pixelOffset : ftMouseEvt.pixelOffset
	});
	infoWnd.open(mapCanvas);
	}


	/*
	* (1)Initialize the google-api-javascript-client library.
	*/
	function init_api_client() {
	gapi.client.setApiKey('AIzaSyDxSkKsMgiZTaiDTyswwiy5vQElYeOe_Ac');
	gapi.client.load('fusiontables', 'v1', init_map);
	}
	var infowindow = new google.maps.InfoWindow();

	google.maps.event.addListener(layer, 'click', function(e) {
	// Construct the info window content using the
	// data from the MouseEvent object. This is data
	// from the Fusion Table.
	var contentString = [
	'<div class="tabs">',
	'<ul>',
	'<li><a href="#tab-1"><span>Name</span></a></li>',
	'<li><a href="#tab-2"><span>About</span></a></li>',
	'</ul>',
	'<div id="tab-1">',
	'<p>' + e.row['name'].value + '</p>',
	'</div>',
	'<div id="tab-2">',
	'<p>' + e.row['location'].value + '</p>',
	'</div>',
	'</div>'
	].join('');

	infowindow.setContent(contentString);
	infowindow.setPosition(e.latLng);
	infowindow.open(map);
	$(".tabs").tabs({ selected: 0 });
	});
	.googft-info-window { background-color: #1b1b1b;color:#fff; }
	.googft-info-window a { color:#e74c3c; }