PAX Google maps plugin
This is an example of a PAX plugin: a google maps abstraction, which makes it simpler to display a map for a certain address.
View the javascript source here.
To view the HTML, look in the source, for the DIV with id of 'exampleSurround'.
To download, go to the download page.
How to use it
Below you will see how to use the google maps plugin, in both a minimal and extended use case
Minimal use case
The google maps plugin requires that you have a valid google maps API Key, here is one that works with 'localhost', so you can develop on your development box. In order to use google maps on your own domain, you will need to sign up for a key, but for now, you can use the key in the example below:
<head>
<script type="text/javascript" src="/pax/pax_prod_safe.js"></script>
<!-- API Key for localhost -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAJDLv3q8BFBryRorw-851MRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTyuslsNlFqyphYqv1PCUD8WrZA2A"></script>
</head>
<body>
<div id="google_map" style="width: 400px; height: 300px"></div>
<script language="javascript">
pax.load.onloaded( function() {
// Show the map
pax.plugin.widget.googlemaps.initMap( $( 'google_map' ), {
address: '14 martin place, sydney NSW 2000, Australia'
} );
} );
</script>
</body>
</html>
Extended use case
The google maps plugin can also show street views, (where available), and handle errors gracefully. This example will demonstrate streetview, and error handeling:
<head>
<script type="text/javascript" src="/pax/pax_prod_safe.js"></script>
<!-- API Key for localhost -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAJDLv3q8BFBryRorw-851MRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTyuslsNlFqyphYqv1PCUD8WrZA2A"></script>
</head>
<body>
<b>Enter address</b>: <input type='text' id='address' value='14 martin place, sydney NSW 2000, Australia'>
<button id='go'>Show street</button>
<div id="google_streetview" style="width: 400px; height: 300px"></div>
<script language="javascript">
pax.load.onloaded( function() {
// Function to show the street view
var showAddress = function( address ) {
pax.plugin.widget.googlemaps.initStreetview( $( 'google_streetview' ), {
address: address,
errorHandler: function( errorCode ) {
alert( 'Error code caught by handler: ' + errorCode + ' occured!' );
}
} );
};
pax.event.bind( $('go'), 'click', function(){
showAddress( $('address').value );
} );
// Show the streetview; we use a fake address here, to show the error handler do it's thing
showAddress( '123 Fake street, sydney NSW 2000, Australia' );
} );
</script>
</body>
</html>