Ever since Street View came out in New Zealand, we’ve been itching to play around with StreetView. As part of our Summer of Code project, Stephen built Street View prototype called Mapsicle. Since then Mapsicle became a pet R&D project at ProjectX.
Today, we’d like to announce the V1 release of Mapsicle as part of the Gmaps-util library.
What can you do with Mapsicle?
Using Mapsicle library, you can do a lot of interesting things:
- Create and show markers at various locations on Street View like at Disneyland Paris
- Show markers that are outside of the field of view like the NZ flag marker above.
- Create info-windows at locations.
Getting started
Getting started on Mapiscle is really easy. To add Mapsicle to any page simply:
- Download the library from SVN for Gmaps-utils library .
- Include the mapsicle.js in the document header
<script src="mapsicle.js" type="text/javascript"></script>
- Define a ‘div’ element on your page to contain the Mapsicle object
<div id="mapsicle_div" style="width:600px;height:400px;"></div>
- On the page load event, create a new Mapsicle object, with the first param being the id of the container ‘div’ element,
and the second being the init a GLatLng object for the inital location.
function init(){
var mapsicle = new Mapsicle("mapsicle_div", new GLatLng(-41.292579, 174.779075));
}
Simple Example
This example shows the basics of adding a marker and location to the Mapsicle view.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Mapsicle</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
google.load("maps","2");
</script>
<script type="text/javascript" src="mapsicle.js"></script>
<script type="text/javascript">
function init(){
var mapsicle = new Mapsicle("mapsicle_div", new GLatLng(-41.292579, 174.779075));
var marker = new SVMarker({
showOffscreen:true,
iconURL:"images/mapsicle_marker.png",
width:150,
height:150,
scale:0.2
});
var location = new SVLocation({
lat:-41.29249,
lng:174.778889,
marker:marker
});
mapsicle.addLocation(location);
}
</script>
</head>
<body onload="init();" onunload="GUnload()">
<div id="mapsicle_div" style="width:850px;height:400px;"></div>
</body>
</html>
View example (simple_demo.html).
Mapiscle possibilities
We believe there are loads of possibilities in the types of mashups and map applications that you can now create with Mapsicle. Add to that to the Street View partner program, and Mapsicle will help to launch a new generation of mashups.
Here are some ideas :
- Annotate locations – Need to annonate a building or a place now you can like or demo – StreetTag.net
- Advanced Store locators – Create store locators showing you exactly how to get to your store from their current location.
- Interactive tours – Combine Street View with content to show people interactive tours of the streets of the world.
- Interative kiosk – What about Street View as a touch screen information kiosk.
- Digital signage – Create interactive advertising on Street View using video and images.
- Games – Build a treasure hunt application or what a game to drive around Thunderhill raceway ?
- Mashups – How about adding Street View to your mashup ?
Contribute
It is early days for the library, and we have a bunch of features that we are working enhance what you can do with Street View. You can contribute and enhance Street View as part of the Google Maps Utility library. We’d really love your feedback to help us improve Mapsicle and build more cool apps for the Google maps platform.
