To add Mapsicle to any page simply:
<script src="mapsicle.js" type="text/javascript"></script>
<div id="mapsicle_div" style="width:600px;height:400px;"></div>
function init(){
var mapsicle = new Mapsicle(document.getElementById("mapsicle_div"), new GLatLng(-41.292579, 174.779075));
}
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(document.getElementById("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).
Mini InfoBoxes are designed to provide a simple way to display a single line of text to accompany any marker.
<!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>Streetview Mapsicle</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA5zA5E-OCPShXfBE6gUw8hBQazInCDZ0HN2WWjWf2XWRlss09RBTJW2Yfd0zQtGF7syQieeo8Soh0Bg"></script>
<script type="text/javascript">
google.load("maps","2");
</script>
<script type="text/javascript" src="../src/mapsicle.js"></script>
<script type="text/javascript">
var mapsicle;
function init(){
mapsicle = new Mapsicle(document.getElementById("mapsicle_div"), new GLatLng(37.42084, -122.084233));
var info = new SVMiniInfoBox({
inner: "STREETVIEW MAPSICLE",
width: 200
});
var location = new SVLocation({
name:"STREETVIEW MAPSICLE",
lat:37.423071,
lng:-122.084254,
info:info
});
mapsicle.addLocation(location);
var info2 = new SVMiniInfoBox({
inner: "MORE MAPSICLE",
width: 130
});
var location2 = new SVLocation({
name:"MORE MAPSICLE",
lat:37.423071,
lng:-122.085254,
info:info2
});
mapsicle.addLocation(location2);
}
</script>
</head>
<body onload="init();" onunload="GUnload()">
<div id="mapsicle_div" style="width:850px;height:400px;"></div>
</body>
</html>
View example (mini_info_boxes.html).
Custom InfoWindows provide greater flexibility, by allowing HTML and CSS to be defined customly.
<!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>
<style type="text/css">
.my_funky_demo_window{
border: 1px solid #004879;
width: 200px;
height:100px;
background-color: #ccc;
padding:5px;
text-align:center;
font-family: Helvetica,Arial,sans-serif;
}
.my_funky_demo_window h3{
margin:0;
font-size:12pt;
}
.my_funky_demo_window span{
font-size:9pt;
}
.my_funky_demo_window img{
vertical-align:middle;
margin-right:5px;
}
</style>
<script type="text/javascript" src="../src/mapsicle.js"></script>
<script type="text/javascript">
var mapsicle;
function init(){
mapsicle = new Mapsicle(document.getElementById("mapsicle_div"), new GLatLng(-41.292579, 174.779075));
var custom_box = document.createElement('div');
custom_box.className = "my_funky_demo_window";
custom_box.innerHTML = "<h3><img src='images/mapsicle_marker_sm.png' />Streetview Mapsicle</h3><span>Lorem ipsum dolor ....</span>";
var info = new SVCustomInfoWindow({
inner: custom_box,
width: 200,
height:100,
overlayAnchor: new GPoint(20, 40)
});
var location = new SVLocation({
name:"MAPSICLE",
lat:-41.29249,
lng:174.778889,
info:info
});
mapsicle.addLocation(location);
}
</script>
</head>
<body onload="init();" onunload="GUnload()">
<div id="mapsicle_div" style="width:850px;height:400px;"></div>
</body>
</html>
View example (custom_info_windows.html).
This example shows how to use Mapsicle's event callbacks to connect Mapsicle with a Google Map
<!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 home_point = new GLatLng(-41.292579, 174.779075);
var mapsicle = new Mapsicle(document.getElementById("mapsicle_panel"), home_point);
var map = new GMap2(document.getElementById("map_panel"));
map.setUIToDefault();
map.setCenter(home_point,17);
var pegman_icon = new GIcon();
pegman_icon.image = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-0.png";
pegman_icon.iconSize = new GSize(49,52);
pegman_icon.iconAnchor = new GPoint(26,32);
var pegman_marker = new GMarker(home_point,{icon:pegman_icon});
map.addOverlay(pegman_marker);
GEvent.addListener(mapsicle, "yawchanged", function(yaw){
var angle = parseInt((yaw/22.5)+0.5);
if (angle == 16) angle = 0;
pegman_marker.setImage("http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-" + angle + ".png");
});
GEvent.addListener(mapsicle, "mapsicle_position_changed", function(location){
pegman_marker.setLatLng(location.latlng);
});
var sv_marker = new SVMarker({
iconURL:"images/mapsicle_marker.png",
width:150,
height:150,
scale:0.2
});
var location = new SVLocation({
lat:-41.29249,
lng:174.778889,
marker:sv_marker
});
mapsicle.addLocation(location);
var map_icon = new GIcon();
map_icon.image = "images/mapsicle_marker_sm.png";
map_icon.iconSize = new GSize(35,35);
map_icon.iconAnchor = new GPoint(17.5,17.5);
var map_marker = new GMarker(new GLatLng(-41.29249,174.778889),{icon:map_icon});
map.addOverlay(map_marker);
}
</script>
</head>
<body onload="init();" onunload="GUnload()">
<div id="mapsicle_panel" style="width:850px;height:400px;"></div>
<div id="map_panel" style="width:850px;height:200px;"></div>
</body>
</html>
View example (map_connect_demo.html).
Shows how to use setPosition to delay launching Mapsicle until you are ready
<!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>Streetview Mapsicle</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q&sensor=false">
<script type="text/javascript">
google.load("maps","2");
</script>
<script type="text/javascript">
//<![CDATA[
document.write('<script type="text/javascript" src="../src/mapsicle' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var mapsicle;
function init(){
mapsicle = new Mapsicle(document.getElementById("mapsicle_div"));
var info = new SVMiniInfoBox({
inner: "Trains",
width: 75
});
var location = new SVLocation({
name:"Trains",
lat:36.056455,
lng: -112.144318,
info:info
});
mapsicle.addLocation(location);
GEvent.addListener(mapsicle, "zoomchanged", function(z){
GLog.write("Zoom changed at " + new Date());
});
}
function canyonize(){
mapsicle.setPosition(new GLatLng(36.056393,-112.144318), { yaw: 2 }, function () { alert("Failed!"); });
var start_link = document.getElementById('start_link');
start_link.parentNode.removeChild(start_link);
}
//]]>
</script>
</head>
<body onload="init();" onunload="GUnload()">
<a href="#" onclick="canyonize();" id="start_link">Start it up!</a>
<div id="mapsicle_div" style="width:850px;height:400px;"></div>
</body>
</html>