Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Google Maps API V3 extras for Mapstraction
<!DOCTYPE html>
<html>
<head>
<title>Smapping!</title>
<link rel="stylesheet" type="text/css" href="/stylesheet.css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/scripts/mxn/mxn.js?(googlev3,[geocoder],[extras])"></script>
<script type="text/javascript">
var mapstraction;
function initialize() {
mapstraction = new mxn.Mapstraction('mymap','googlev3');
mapstraction.addExtras();
mapstraction.setCenterAndZoom(new mxn.LatLonPoint(37.75,-122.44), 8);
mapstraction.enableScrollWheelZoom();
}
$(document).ready(function() { initialize(); });
</script>
</head>
<body>
<div id="header">
<h1>Mapstraction Google Extras</h1>
</div>
<div id="container">
<div id="mymap"></div>
</div>
<div id="footer">
</div>
</body>
</html>
// Draggable markers extension to Mapstraction for Google V3 maps
/**
* Add some Google v3 goodies to baseline mapstraction.
*/
mxn.addProxyMethods( mxn.Mapstraction, [
/**
* Add a method that can be called to add our extra stuff to an implementation.
*/
'addExtras'
]);
/*
* Add reverse geocoding capabilities to the Google v3 geocoder
*/
mxn.addProxyMethods( mxn.Geocoder, [
'reverseGeocode',
'reverseGeocodeCallback'
]);
// Amend baseline implementation
mxn.register( 'googlev3', {
Mapstraction: {
addExtras: function() {
var me = this;
me.markerAdded.addHandler( function( name, source, args ) {
// enable dragend event for google
args.marker.dragend = new mxn.Event( 'dragend', args.marker );
google.maps.event.addListener( args.marker.proprietary_marker, 'dragend', function() {
var latlng = args.marker.proprietary_marker.getPosition();
args.marker.dragend.fire( {
location: new mxn.LatLonPoint( latlng.lat(), latlng.lng() )
} );
});
// enable dragstart event for google
args.marker.dragstart = new mxn.Event( 'dragstart', args.marker );
google.maps.event.addListener( args.marker.proprietary_marker, 'dragstart', function() {
var latlng = args.marker.proprietary_marker.getPosition();
args.marker.dragend.fire( {
location: new mxn.LatLonPoint( latlng.lat(), latlng.lng() )
} );
});
// enable drag event for google
args.marker.drag = new mxn.Event( 'drag', args.marker );
google.maps.event.addListener( args.marker.proprietary_marker, 'drag', function() {
var latlng = args.marker.proprietary_marker.getPosition();
args.marker.drag.fire( {
location: new mxn.LatLonPoint( latlng.lat(), latlng.lng() )
} );
});
});
}
}
});
// Amend geocoder implementation
mxn.register( 'googlev3', {
Geocoder: {
reverseGeocode: function(latlng) {
var me = this;
if (!latlng.hasOwnProperty('latLng')) {
alert('No latLng specified.');
}
this.geocoders[this.api].geocode(latlng, function(results, status) {
me.reverseGeocodeCallback(results, status);
});
},
reverseGeocodeCallback: function(result, status) {
var return_location = {};
if (status != google.maps.GeocoderStatus.OK) {
this.error_callback(status);
}
else {
var results = [];
for (var i = 0; i < result.length; i++)
{
if (result[0].formatted_address)
{
results[i] = result[i].formatted_address;
}
}
me.callback(return_location);
}
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.