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); } </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 }); 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>