Sunday, September 22, 2013

Google Maps API with Mixer2, SpringMVC

Mixer2 - the java/xhtml template engine - is compliant to inline JavaScript. is a sample project using Google Maps API, Spring MVC, and Mixer2. I describe the code and some tips.

First, look at the map.html, a template html file for Mixer2. This html is almost a copy of google official hello world sample.

The difference is one code.


center: new google.maps.LatLng(-34.397, 150.644),


center: new google.maps.LatLng(, defaultValues.lng),

and one script tag is added.

The point is that the "data" and "program" is separated into each <script> tags.

Next, the controller of Spring MVC, IndexController. Controller create the model having start latitude and longitude values and pass it to view;

    @RequestMapping(value = "/")
    public String map(Model model) {
        log.debug("showing map()...");

        Map latLngMap = new HashMap();
        latLngMap.put("lat", 35.633302);
        latLngMap.put("lng", 139.799652);
        model.addAttribute("latLngMap", latLngMap);
        return "mapView";

The view is MapView class.


// snip...

// load html template
String mainTemplate = "classpath:m2mockup/m2template/map.html";
Html html = getMixer2Engine().loadHtmlTemplate(
// snip...

Map latLngMap = (Map) model.get("latLngMap");

// set default value for google maps api
Gson gson = new Gson();
Script script = html.getHead().getById("defaultValuesJson", Script.class);
script.setContent("var defaultValues = " + gson.toJson(latLngMap) + ";");

You should look that the content of <script id="defaultValuesJson"> tag is replaced by the new json strings using mixer2 tag object and methods.

You get the result of browser:



  • You can write map.html on local editor. The JavaScript code can run without deploying application server. You can see the map on browser. If you use JSP and write the code like "center: new google.maps.LatLng(<%=startLat%>, <%=startLng%>)", Your code can not run it as JavaScript !
  • Using Mixer2 as template engine, you should separate "data" and "program" in your JavaScript code on the template and put them into each <script> tags. On the server side, replace only <script> tag having the "data".

Tuesday, September 10, 2013





この資料だけじゃ、5月のJJUGでのプレゼンや、1月のSpring勉強会でのプレゼンの焼き直しにすぎないですごめんなさい。肝心なのはこの前半にデモしたWebアプリです。 そのソースコードはこちら

もっと詳しく聞いてやってもいいぜ、という方は、今月末の第三回 #渋谷Java : ATNDへお越しください。それまでの間は「Mixer2によるダイナミックCSS Sprite」に関する全貌の細かい話はブログ等には書かないつもりです。

そうはいっても、それぞれスケジュールってものがありますので今日の勉強会だって今月末のだって、来れない人だっていますよね。 今日もLT後にいろいろ質問してくださった方がいらっしゃいました。それはそれで大歓迎なんですが、 どうぞメーリングリストのほうもご利用ください。ちょっとした疑問でも、漠然とした質問でも。