virtualandy/flickrmap.js

## flickrmap.js
function initialize(searchLat, searchLon) {
  var mapOptions = {
    center: new google.maps.LatLng(searchLat, searchLon),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"),
      mapOptions);
  var marker = new google.maps.Marker();
  google.maps.event.addListener(marker, "mouseover", function(event) {
    // to get the geographical position:
    var pos = marker.getPosition();
    var lat = pos.lat();
    var lng = pos.lng();
    console.log('you are at ', lat, ' and ', lng);
  });
  return map;
}

function getFlickrPhotos(map, searchLat, searchLon) {

  var FLICKR_API_KEY = '40c7bbee397489819102220a79091248';

  var searchUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.search&";

  var searchReqParams = {
    'api_key': FLICKR_API_KEY,
    'tags': 'monument,statue,historical',
    'has_geo': true,
    'lat': searchLat,
    'lon': searchLon,
    //'place_id': place.place_id,
    'accuracy': 11,
    'format': 'json',
    'safe_search': 1,
    'privacy_filter': 1,
    'per_page': 10
  }

  $.ajax({
    type: 'GET',
    url : searchUrl,
    dataType:'jsonp',
    cache : true,
    crossDomain : true,
    jsonp: false,
    jsonpCallback : 'jsonFlickrApi',
    data: searchReqParams,
    success: function(data) {
      if (data.photos.photo.length > 0) {
        getAndMarkPhotos(data.photos);
        $('#warning').hide();
      } else {
        console.log(data.photos);
        $('#warning').show();
      }

    }
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log('req failed');
    console.log('textStatus: ', textStatus, ' code: ', jqXHR.status);
  });


  function getAndMarkPhotos(photos) {
    var numPhotos = photos.photo.length;
    for(var i=0; i<numPhotos; i++) {
      var photo = photos.photo[i];
      getPhotoLocation(photo.id);
    }
  }

  function getPhotoLocation(photoId) {
    var photoLocUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.geo.getLocation&";

    var photoParams = {
      'api_key': FLICKR_API_KEY,
      'photo_id': photoId
    }

    $.ajax({
      type: 'GET',
      url : photoLocUrl,
      async: false,
      cache : true,
      crossDomain : true,
      dataType: 'xml',
      data: photoParams,
      success: function(data) {
        var location = $(data).find('location')[0];
        var photoLat = $(location).attr('latitude');
        var photoLon = $(location).attr('longitude');
        addOverlay(photoLat, photoLon, 'Flick Photo '+photoId, map);

      }
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      console.log('req failed ', jqXHR);
      console.log('textStatus: ', textStatus, ' code: ', jqXHR.status);
    });

  }

  function addOverlay(lat, lon, text, map) {
    var myLatlng = new google.maps.LatLng(lat,lon);

    var marker = new google.maps.Marker({
      position: myLatlng,
      title:text
    });

    marker.setMap(map);
    //map.setCenter(myLatLng);
  }
}

$(document).ready(function() {
  $('#warning').hide();
  $('#search').on('click', function() {
    var searchLat = $('#lat').val();
    var searchLon = $('#lon').val();
    var googleMap = initialize(searchLat, searchLon);
    getFlickrPhotos(googleMap, searchLat, searchLon);
  });

  $('#search').trigger('click');

});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 75%; width: 75%; margin: 0 0 0 2em; }
      #intro { padding-left: 2em;}
    </style>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyB3WDbJuoc6iqUEQ7ZkiQWHw6eqO5Os8Zc">
    </script>
    <script src="./flickrmap.js"></script>
  </head>
  <body>
    <div id="intro">
      <h3>A simple demo that shows how JSON, REST and a little JavaScript could be the start of a capable web application.</h3>
      <label for"lat">Lat:</label>
      <input id="lat" value="38.8951" placeholder="38.8951" />
      <label for"lon">Lon:</label>
      <input id="lon" value="-77.0367" placeholder="-77.0367" />
      <button id="search">Search</button>
      <div>
        <em>Enter a latitude and longitude to find Flickr photos related to the terms "monument", "statue" or "historical".</em>
      </div>
    </div>
    <div id="map-canvas"/>
  </body>
</html>
	function initialize(searchLat, searchLon) {
	var mapOptions = {
	center: new google.maps.LatLng(searchLat, searchLon),
	zoom: 15,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map-canvas"),
	mapOptions);
	var marker = new google.maps.Marker();
	google.maps.event.addListener(marker, "mouseover", function(event) {
	// to get the geographical position:
	var pos = marker.getPosition();
	var lat = pos.lat();
	var lng = pos.lng();
	console.log('you are at ', lat, ' and ', lng);
	});
	return map;
	}

	function getFlickrPhotos(map, searchLat, searchLon) {

	var FLICKR_API_KEY = '40c7bbee397489819102220a79091248';

	var searchUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.search&";

	var searchReqParams = {
	'api_key': FLICKR_API_KEY,
	'tags': 'monument,statue,historical',
	'has_geo': true,
	'lat': searchLat,
	'lon': searchLon,
	//'place_id': place.place_id,
	'accuracy': 11,
	'format': 'json',
	'safe_search': 1,
	'privacy_filter': 1,
	'per_page': 10
	}

	$.ajax({
	type: 'GET',
	url : searchUrl,
	dataType:'jsonp',
	cache : true,
	crossDomain : true,
	jsonp: false,
	jsonpCallback : 'jsonFlickrApi',
	data: searchReqParams,
	success: function(data) {
	if (data.photos.photo.length > 0) {
	getAndMarkPhotos(data.photos);
	$('#warning').hide();
	} else {
	console.log(data.photos);
	$('#warning').show();
	}

	}
	})
	.fail(function(jqXHR, textStatus, errorThrown) {
	console.log('req failed');
	console.log('textStatus: ', textStatus, ' code: ', jqXHR.status);
	});


	function getAndMarkPhotos(photos) {
	var numPhotos = photos.photo.length;
	for(var i=0; i<numPhotos; i++) {
	var photo = photos.photo[i];
	getPhotoLocation(photo.id);
	}
	}

	function getPhotoLocation(photoId) {
	var photoLocUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.geo.getLocation&";

	var photoParams = {
	'api_key': FLICKR_API_KEY,
	'photo_id': photoId
	}

	$.ajax({
	type: 'GET',
	url : photoLocUrl,
	async: false,
	cache : true,
	crossDomain : true,
	dataType: 'xml',
	data: photoParams,
	success: function(data) {
	var location = $(data).find('location')[0];
	var photoLat = $(location).attr('latitude');
	var photoLon = $(location).attr('longitude');
	addOverlay(photoLat, photoLon, 'Flick Photo '+photoId, map);

	}
	})
	.fail(function(jqXHR, textStatus, errorThrown) {
	console.log('req failed ', jqXHR);
	console.log('textStatus: ', textStatus, ' code: ', jqXHR.status);
	});

	}

	function addOverlay(lat, lon, text, map) {
	var myLatlng = new google.maps.LatLng(lat,lon);

	var marker = new google.maps.Marker({
	position: myLatlng,
	title:text
	});

	marker.setMap(map);
	//map.setCenter(myLatLng);
	}
	}

	$(document).ready(function() {
	$('#warning').hide();
	$('#search').on('click', function() {
	var searchLat = $('#lat').val();
	var searchLon = $('#lon').val();
	var googleMap = initialize(searchLat, searchLon);
	getFlickrPhotos(googleMap, searchLat, searchLon);
	});

	$('#search').trigger('click');

	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map-canvas { height: 75%; width: 75%; margin: 0 0 0 2em; }
	#intro { padding-left: 2em;}
	</style>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyB3WDbJuoc6iqUEQ7ZkiQWHw6eqO5Os8Zc">
	</script>
	<script src="./flickrmap.js"></script>
	</head>
	<body>
	<div id="intro">
	<h3>A simple demo that shows how JSON, REST and a little JavaScript could be the start of a capable web application.</h3>
	<label for"lat">Lat:</label>
	<input id="lat" value="38.8951" placeholder="38.8951" />
	<label for"lon">Lon:</label>
	<input id="lon" value="-77.0367" placeholder="-77.0367" />
	<button id="search">Search</button>
	<div>
	<em>Enter a latitude and longitude to find Flickr photos related to the terms "monument", "statue" or "historical".</em>
	</div>
	</div>
	<div id="map-canvas"/>
	</body>
	</html>