Thymeleaf+SpringにてGoogle Mapを使用する。&利用時にSAXExceptionが発生しないように注意する。

Thymeleaf Spring Google Map

「Spring MVCのサンプルプロジェクトでViewの描画をthymeleafテンプレートエンジンによるものに変更する」からの発展形。

・WEB-INF/templates配下にhtmlを１つ追加する。
ここで1つ注意することがある。
Google Mapを利用するにあたって、"http://maps.google.com/maps/api/js?v=3&sensor=false"をscriptタグのsrc属性に指定するが、クエリパラメータを指定する際のアンパサンドは実体参照(&)で記述しないとSAXExceptionが発生する。

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Tweet表示画面</title>
 <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map { height: 100% }
    </style>
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"
	type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript">
	var map;
	// 初期化。
	function init() {
		// Google Mapで利用する初期設定用の変数
		var latlng = new google.maps.LatLng(39, 138);
		var opts = {
			zoom : 6,
			mapTypeId : google.maps.MapTypeId.ROADMAP, //通常の地図
			center : latlng                            //地図の場所
		};
		// １．Mapを作成
		map = new google.maps.Map(document.getElementById("map"), opts);

		// Markerの初期設定
		var markerOpts = null;
		var marker	   = null;
		var latitude   = 35.668175;
		var longitude  = 139.699032;
		var markerPosition = new google.maps.LatLng(latitude, longitude);
		markerOpts = {
				position : markerPosition,
				map : map,
				title : "marker"
			};
		// ２．直前で作成したMarkerOptionsを利用してMarkerを作成
		marker = new google.maps.Marker(markerOpts);

		//吹き出しを作成
        var contentString = 'Shibuya js!';
        var infowindow = new google.maps.InfoWindow({
            content: contentString  //吹き出し内コメント
        });

      	//３．マウスをかざしたときに吹き出しがオープンするイベントを定義
        google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.open(map,marker);
        });
        //４．マウスを取り除いたときに吹き出しがクローズするイベントを定義
        google.maps.event.addListener(marker, 'mouseout', function() {
            infowindow.close(map,marker);
        });
	}
</script>
</head>

<body onload="init()">
	<div id="map"></div>
</body>

</html>

・コントローラにmappingを1つ追加する。

@RequestMapping(value = "/displayTweet", method = RequestMethod.GET)
	public String displayTweet(Locale locale, Model model) {
		logger.info("called get Tweet Logic.");

		return "displayTweet";
	}