Mapsicle Examples

Table of Contents

How-To

To add Mapsicle to any page simply:

  1. Include the mapsicle.js in the document header
  2. <script src="mapsicle.js" type="text/javascript"></script>
  3. Define a 'div' element on your page to contain the Mapsicle object
  4. <div id="mapsicle_div" style="width:600px;height:400px;"></div>
  5. On the page load event, create a new Mapsicle object, with the first param being the container 'div' element, and the second being the init a GLatLng object for the inital location.
  6. function init(){
        var mapsicle = new Mapsicle(document.getElementById("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(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

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

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).

Connect to a Google Map

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).