Jazz Calendar: Finding Nearby Gigs

Contact Us or call 1-877-932-8228
Jazz Calendar: Finding Nearby Gigs

Jazz Calendar: Finding Nearby Gigs

Let's build a page for the Jazz Calendar site allowing users to find upcoming concerts near their current location - folks can browse to the page on their smartphone (or desktop computer) and, if they allow their device to send their location, see map pins representing nearby gigs. Of course, we won't actually be listing real gigs; we'll mock this up by creating example locations close to them.

Here's a screenshot of the page:

screenshot - Google map

The following JavaScript code, from GeoLocationAPI/Demos/jazzcalmap.html, accomplishes our goal:

function locateSuccess(loc) {
var latitude = loc.coords.latitude;
var longitude = loc.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);

//create two fake gig locations, near to the user's current location:
var fakegig1_coords = new google.maps.LatLng(latitude - 0.001, longitude + 0.002);
var fakegig2_coords = new google.maps.LatLng(latitude - 0.003, longitude - 0.002);

//set options for the Google Map:
var options = {
	zoom: 15,
	center: coords,
	mapTypeId: google.maps.MapTypeId.ROADMAP


//create the Google Map:
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

//create display text for the map popup window and the popup window
var infoWindowText = "You are here. Nearby markers show tonight's gigs.";
var infowindow = new google.maps.InfoWindow({
	content: infoWindowText

//create a marker for the user's current position
var marker = new google.maps.Marker({
	position: coords,
	map: map

//create markers for the two gigs
var fakegig1_marker = new google.maps.Marker({
	position: fakegig1_coords,
	map: map
var fakegig2_marker = new google.maps.Marker({
	position: fakegig2_coords,
	map: map

//enable clicking on the current-location marker
google.maps.event.addListener(marker, 'click', function() {

//popup the current-location window when the page loads
google.maps.event.trigger(marker, 'click');


We use the now-familiar if (navigator.geolocation) to test if the user's device supports the GeoLocation API; if so, function locateSuccess will be invoked.

We find the user's current latitude and longitude position with loc.coords.latitude and loc.coords.longitude).

The variables fakegig1_coords and fakegig2_coords represent the nearby local concerts - we set locations for these by adding or subtracting a little distance from the user's actual location. Of course, in a real application, these locations would be generated from some kind of server-side, database-enabled code (via PHP, ColdFusion, or other, similar, technology), but this example will suffice for our demo now.

Note that the page (GeoLocationAPI/Demos/jazzcalmap.html) includes a Google Maps JavaScript file (<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>) in the <head> section. The rest of the JavaScript code sets up and displays the Google Map: we set the zoom level and other options, create the map, create display text and show on a popup window at the user's current location, and create markers to the user's current position and the two fake gig locations.

Note, in particular, that we add the Google Map to the #mapcontainer div, located (in our markup) before the JavaScript map code: the statement new google.maps.Map(document.getElementById("mapcontainer"), options) places the map in that div. In the associated CSS file (GeoLocationAPI/Demos/css/jazzcalmap.css), we've given the mapcontainer div a width of 100% and height of 400px - this ensures both that it shows up (because it has some guaranteed height) and a flexible width (to scale with its container element).