digitalWestie · December 8, 2014 16:05
diff --git a/catmap.html b/catmap.html
 <!DOCTYPE html>

 <html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>Fusion Tables and Google Maps API Example: Custom Markers</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        font-size: 12px;
      }

      #map-canvas {
        height: 500px;
        width: 600px;
      }
    </style>

    <script type="text/javascript"
        src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>

    <script type="text/javascript">

      var map;
      var infoWindow = new google.maps.InfoWindow();
      var DEFAULT_ICON_URL = 'http://g.etfv.co/http://www.google.com'

      // EDIT: change this key to your own from the Google APIs Console
      // https://code.google.com/apis/console/
      var apiKey = 'AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ';

      // EDIT: Specify the table with location data and icon URLs
      var tableID = '1i0GYWV8I-rpOlAlJ-ysoH9wBlmXTJo5xvohHNW6L';

      // Create variables for the columns you need to retrieve from the table
      // EDIT this list as needed, then find and edit two places below.
      var latitudeColumn = 'Latitude';
      var longitudeColumn = 'Longitude';
      var iconUrlColumn = 'Icon';
      var infowindowContentColumn = 'Contact_name';

      function createMarker (coordinate, url, content) {
          var marker = new google.maps.Marker({
            map: map,
            position: coordinate,
            icon: new google.maps.MarkerImage(url)
          });
          google.maps.event.addListener(marker, 'click', function(event) {
            infoWindow.setPosition(coordinate);
            infoWindow.setContent(content);
            infoWindow.open(map);
          });
        };

      function fetchData() {

        // Construct a query to get data from the Fusion Table
        // EDIT this list to include the variables for columns named above
        var query = 'SELECT '
                    + latitudeColumn + ','
                    + longitudeColumn + ','
                    + iconUrlColumn + ','
                    + infowindowContentColumn + ' FROM '
                    + tableID;
        var encodedQuery = encodeURIComponent(query);

        // Construct the URL
        var url = ['https://www.googleapis.com/fusiontables/v1/query'];
            url.push('?sql=' + encodedQuery);
            url.push('&key=' + apiKey);
            url.push('&callback=?');

        // Send the JSONP request using jQuery
        console.log(url.join(''));
          $.ajax({
            url: url.join(''),
            dataType: 'jsonp',
            success: onDataFetched
          });
      }

      function onDataFetched(data) {
        var rows = data['rows'];
        var iconUrl;
        var content;
        var coordinate;

        // Copy each row of data from the response into variables.
        // Each column is present in the order listed in the query.
        // Starting from 0.
        // EDIT this if you've changed the columns, above.
        for (var i in rows) {
          console.log(rows[i]);
          coordinate = new google.maps.LatLng(rows[i][0],rows[i][1]);
          iconUrl = rows[i][2];
          content = rows[i][3];

          if (iconUrl) {   // ensure not empty
            createMarker(coordinate, iconUrl, content);
          } else {
            createMarker(coordinate, DEFAULT_ICON_URL, content);
          }
        }
      }

      function initialize() {

        fetchData();  // begin retrieving data from table, and put it on the map

        map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(56.62, -3.23),
          zoom: 9,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      }

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="UTF-8">

	<title>Fusion Tables and Google Maps API Example: Custom Markers</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	font-size: 12px;
	}

	#map-canvas {
	height: 500px;
	width: 600px;
	}
	</style>

	<script type="text/javascript"
	src="https://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
	</script>

	<script type="text/javascript">

	var map;
	var infoWindow = new google.maps.InfoWindow();
	var DEFAULT_ICON_URL = 'http://g.etfv.co/http://www.google.com'

	// EDIT: change this key to your own from the Google APIs Console
	// https://code.google.com/apis/console/
	var apiKey = 'AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ';

	// EDIT: Specify the table with location data and icon URLs
	var tableID = '1i0GYWV8I-rpOlAlJ-ysoH9wBlmXTJo5xvohHNW6L';

	// Create variables for the columns you need to retrieve from the table
	// EDIT this list as needed, then find and edit two places below.
	var latitudeColumn = 'Latitude';
	var longitudeColumn = 'Longitude';
	var iconUrlColumn = 'Icon';
	var infowindowContentColumn = 'Contact_name';

	function createMarker (coordinate, url, content) {
	var marker = new google.maps.Marker({
	map: map,
	position: coordinate,
	icon: new google.maps.MarkerImage(url)
	});
	google.maps.event.addListener(marker, 'click', function(event) {
	infoWindow.setPosition(coordinate);
	infoWindow.setContent(content);
	infoWindow.open(map);
	});
	};

	function fetchData() {

	// Construct a query to get data from the Fusion Table
	// EDIT this list to include the variables for columns named above
	var query = 'SELECT '
	+ latitudeColumn + ','
	+ longitudeColumn + ','
	+ iconUrlColumn + ','
	+ infowindowContentColumn + ' FROM '
	+ tableID;
	var encodedQuery = encodeURIComponent(query);

	// Construct the URL
	var url = ['https://www.googleapis.com/fusiontables/v1/query'];
	url.push('?sql=' + encodedQuery);
	url.push('&key=' + apiKey);
	url.push('&callback=?');

	// Send the JSONP request using jQuery
	console.log(url.join(''));
	$.ajax({
	url: url.join(''),
	dataType: 'jsonp',
	success: onDataFetched
	});
	}

	function onDataFetched(data) {
	var rows = data['rows'];
	var iconUrl;
	var content;
	var coordinate;

	// Copy each row of data from the response into variables.
	// Each column is present in the order listed in the query.
	// Starting from 0.
	// EDIT this if you've changed the columns, above.
	for (var i in rows) {
	console.log(rows[i]);
	coordinate = new google.maps.LatLng(rows[i][0],rows[i][1]);
	iconUrl = rows[i][2];
	content = rows[i][3];

	if (iconUrl) { // ensure not empty
	createMarker(coordinate, iconUrl, content);
	} else {
	createMarker(coordinate, DEFAULT_ICON_URL, content);
	}
	}
	}

	function initialize() {

	fetchData(); // begin retrieving data from table, and put it on the map

	map = new google.maps.Map(document.getElementById('map-canvas'), {
	center: new google.maps.LatLng(56.62, -3.23),
	zoom: 9,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	}

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

	</script>
	</head>
	<body>
	<div id="map-canvas"></div>
	</body>
	</html>
No results found