This creates a Google Map and lets you add 5 markers (this can be customized) on the map using click events.
GoogleMap is the main constructor.
Example on how to use: (code also found in the js file)
var googleMap = new GoogleMap({
onMarkerAdd: function(marker) {
var position = marker.getPosition();
$('#locations ul').append('<li>Lat: ' + position.lat + ' Lng: ' + position.lng + '</li>');
marker.getFormattedAddress(function(address){
$('#locations ul').append('<li>Address: ' + address + '</li>');
});
}
});What happens above is simple:
We have create a new instance of GoogleMap and we are passing only 1 option, which in fact its a callback function for the onMarkerAdd event.
Basicaly everytime you click the map the script checks if the number of maximum markers (5 default) has been reached if not adds a marker and calls the onMarkerAdd function.
You can use that to get the position or the formated address of the marker and use it as you need.
Here is another example on how you can change the number of maximum markers:
var googleMap = new GoogleMap({
maxMarkers: 3,
onMarkerAdd: function(marker) {
var position = marker.getPosition();
$('#locations ul').append('<li>Lat: ' + position.lat + ' Lng: ' + position.lng + '</li>');
marker.getFormattedAddress(function(address){
$('#locations ul').append('<li>Address: ' + address + '</li>');
});
}
});The complete list of options:
| option | description |
|---|---|
| VERBOSE | Show log information in the console, use false to disable (boolean) |
| mapContainer | Div ID where the map will be generated. Ex: 'map-canvas' (string) |
| maxMarkers | Maximum number of markers (number) |
| mapOptions | Google maps options, see their API for more (object) |
| mapOptions.zoom | Zoom level Ex: 14 (number) |
| mapOptions.center | Location where to center Ex: new google.maps.LatLng(-36.910504, 174.819958) (object) |
| onMarkerAdd | Callback function for when a marker is added (function) |