Google Maps and Location - google-maps-api-3

Question

I'm building an application using CakePHP that will store events including the event location. When a user visits the application they will see a Google Map that will get their location and show events near them in the form of little pins that they can click on to view the event details.
I have some questions though:
1.) How would I store the Location in the DB? Would the actual geolocation coordinates be the best bet and how would I make it easy for a user to create an event and enter them.
2.) Once I have the events in place how do I create custom pins with the info pulled from the DB? Example like foursquare:
3.) Whilst getting the users location using HTML5 Geolocation how do I show a little loader on the map again like Foursquare does?
So far I've managed to create the Map and make the controls minified and get the location of the viewer but I'm not sure how do 3 and show a better feedback to the user for the geolocation.
If someone could help me with those other two questions as well it'd be very much appreciated as I'm finding it very confusing so far. Thanks.
var map;
function initialize() {
var myOptions = {
zoom: 8,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

1) Store the actual coordinates of the location and any extra meta data (if you have it) like place name, foursquare_id, date, etc. Storing it this way will make using the data later on straightforward, such as plotting on a map or location name lookup. This will be your Location model.
Create an Event model which you can then associate to a Location. You could hack together some nice interactive functionality using event handlers on your map markers.
Something like: "the user clicks a location on the map, up pops a box asking them would like like to create a new event at this location, marker is added to the map and a form appears where they can populate the event details, etc, etc." You get the idea.
Have a look at the Marker documentation.
2) You can set a custom image for the map markers using ImageMarker Class. Take a look at the huge set of examples for ideas of what's possible.
3) The navigator.geolocation.getCurrentPosition() method as I understand it, is asynchronous. The first argument is the successCallback.
With this in mind, you could set an overlay on your map: "Finding your location", then make the call to getCurrentPosition(). In your successCallback function, you would then hide the overlay.