<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height:100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script type="text/javascript">
	function getScript(src) {
			    $("head").append("<script src='"+src+"'><\/script>");
	}
	function initialize() {
		var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

		var myMapOptions = {
			 zoom: 15
			,center: secheltLoc
			,mapTypeId: google.maps.MapTypeId.ROADMAP,
		          mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, "MAPabc"]
                }
		};
		var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
		getScript("<%=basePath%>gpsonline/js/infobox.js");
		 addMAPabc(theMap);
		var marker = new google.maps.Marker({
			map: theMap,
			draggable: true,
			position: new google.maps.LatLng(49.47216, -123.76307),
			icon:new google.maps.MarkerImage("http://www.google.com/intl/en_us/mapfiles/close.gif", new google.maps.Size(37, 32),new google.maps.Point(0,0),new google.maps.Point(0, 32)),
			visible: true
		});
		//var icon = new google.maps.Icon();
		//alert(new google.maps.MarkerImage());
		//marker.getIcon().getAnchor(10,10);
		var boxText = document.createElement("div");
		boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
		boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

		var myOptions = {
			 content: boxText
			,disableAutoPan: false
			,maxWidth: 0
			,pixelOffset: new google.maps.Size(-140, 0)
			,zIndex: null
			,boxStyle: { 
			  background: "url('tipbox.gif') no-repeat"
			  ,opacity: 0.75
			  ,width: "280px"
			 }
			,closeBoxMargin: "10px 2px 2px 2px"
			,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
			,infoBoxClearance: new google.maps.Size(1, 1)
			,isHidden: false
			,pane: "floatPane"
			,enableEventPropagation: false
		};

		google.maps.event.addListener(marker, "click", function (e) {
			ib.open(theMap, this);
		});

		var ib = new InfoBox(myOptions);
		ib.open(theMap, marker);
		
		
	}
	
	//地图添加MAPabc
	function addMAPabc(map){//添加MAPabc的瓦片 参数为地图对象  
	    var _tileSize = new google.maps.Size(256,256);
	    var getTileUrl = function(tile,zoom){
	        return "http://emap" + ((tile.x + tile.y) % 4) + ".mapabc.com/mapabc/maptile?v=w2.99&x=" + tile.x + "&y=" + tile.y + "&zoom=" + (17-zoom);  
	    }; 
	    var imageMapType = new google.maps.ImageMapType({alt:"MAPabc",isPng:true,maxZoom:18,minZoom:1,name:"MAPabc",tileSize: new google.maps.Size(256, 256),opacity:1.0,getTileUrl:getTileUrl});  
	    map.mapTypes.set('MAPabc',imageMapType);  
	}  
</script>

<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()">
	<div id="map_canvas"></div>
	<p>
	This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.
</body>

</html>