campreb/index.html

## index.html
<!doctype html>
<html>
<head>
  <title>Streetview Annotation</title>
  <link type='text/css' rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" />
  <style type="text/css">
    #mapdiv{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="mapdiv"></div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var panorama, cafeMarker;
  $(document).ready(function(){
    var point = new google.maps.LatLng(42.370272, -83.469505);
    var panoramaOptions = {
      position: point,
      pov:{
        heading: -95.75,
        pitch: -10.3125,
        zoom: 1
      }
    };

    panorama = new  google.maps.StreetViewPanorama(document.getElementById("mapdiv"), panoramaOptions);

    var cafeMarkerImage = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00');

    cafeMarker = new google.maps.Marker({
        position: new google.maps.LatLng(42.37031723510055, -83.46968541241495),
        map: panorama,
        icon: cafeMarkerImage,
        draggable: true
    });
    var infowindow = new google.maps.InfoWindow({
      content: "<h1>Test Point</h1>"
    });

    google.maps.event.addListener(cafeMarker, "click", function(){
      infowindow.open(panorama, cafeMarker);
    });
  });
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Streetview Annotation</title>
	<link type='text/css' rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" />
	<style type="text/css">
	#mapdiv{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}
	</style>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	</head>
	<body>
	<div id="mapdiv"></div>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
	var panorama, cafeMarker;
	$(document).ready(function(){
	var point = new google.maps.LatLng(42.370272, -83.469505);
	var panoramaOptions = {
	position: point,
	pov:{
	heading: -95.75,
	pitch: -10.3125,
	zoom: 1
	}
	};

	panorama = new google.maps.StreetViewPanorama(document.getElementById("mapdiv"), panoramaOptions);

	var cafeMarkerImage = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe\|FFFF00');

	cafeMarker = new google.maps.Marker({
	position: new google.maps.LatLng(42.37031723510055, -83.46968541241495),
	map: panorama,
	icon: cafeMarkerImage,
	draggable: true
	});
	var infowindow = new google.maps.InfoWindow({
	content: "<h1>Test Point</h1>"
	});

	google.maps.event.addListener(cafeMarker, "click", function(){
	infowindow.open(panorama, cafeMarker);
	});
	});
	</script>
	</body>
	</html>