Skip to content

Instantly share code, notes, and snippets.

@garak
Created May 27, 2011
Embed
What would you like to do?
$().ready(function() {
// search address and get latitude/longitude
var searchLocations = function(e) {
var $form = $(this);
var address = $('input#address').val();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var center = results[0].geometry.location;
$('input#latitude').val(center.lat());
$('input#longitude').val(center.lng());
searchLocationsNear($form);
} else {
alert(address + ' not found');
}
});
return false;
};
// do ajax search
var searchLocationsNear = function($form) {
$.ajax({
url: $form.attr('action') + '?sf_format=json',
data: $form.serializeArray(),
success: showEntries
});
};
// show found items after ajax search
var showEntries = function(res) {
var i;
for (i = 0; i < markers.length; i ++) {
markers[i].setMap(null);
}
markers.length = 0;
var bounds = new google.maps.LatLngBounds();
var $sidebar = $('div#sidebar');
$sidebar.empty();
if (res.length === 0 || !res[0].name) {
$sidebar.text('Nessun risultato trovato');
map.setCenter(new google.maps.LatLng(42, 12));
map.setZoom(6);
} else {
$.each(res, function(i, r) {
var latlng = new google.maps.LatLng(parseFloat(r.lat), parseFloat(r.lng));
var m = createMarker(latlng, r.name, r.address, r.city);
createSidebarEntry($sidebar, m, r.name, r.address, r.city, parseFloat(r.distance));
bounds.extend(latlng);
map.fitBounds(bounds);
});
}
};
// create entry in sidebar for each found item
var createSidebarEntry = function($sidebar, marker, name, address, city, distance) {
var $div = $('<div class="item">');
$div.append(name);
$div.append(' (' + distance.toFixed(1) + 'km) ');
$div.append('<br />' + address + ' ' + city);
$div.click(function() {
google.maps.event.trigger(marker, 'click');
});
$sidebar.append($div);
};
// create marker for each found item
var createMarker = function(latlng, name, address, city) {
var html = '<div class=balloon"><strong>' + name + '</strong><br />' + address + ' ' + city + '</div>';
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
return marker;
};
// ------------------------------------------------------------------------- //
var markers = [];
// init map
var map = new google.maps.Map(document.getElementById('gmap'), {
center: new google.maps.LatLng(42, 12),
zoom: 6,
mapTypeId: 'roadmap',
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }
});
var infoWindow = new google.maps.InfoWindow();
// item search
$('form#myform').submit(searchLocations);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment