topriddy/MapPanel.html

## MapPanel.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:wicket>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>TrackListMapPanel</title>
        <wicket:head>
            <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
            <style type="text/css">
                #map_canvas{
                    margin: 0;
                    padding:0;
                    height: 400px;
                }
            </style>
            <script type="text/javascript">
                $(function(){
                    initialize();
                });

                var map;
                var markersArray = [];
                var flightPlanCoordinates = [];
                var flightPath;

                function initialize(){
                    var myLatlng;
                        if (points.length > 0){
                                myLatlng = new google.maps.LatLng(points[0][0], points[0][1]);
                        }else{

                        }
                    var myOptions = {
                        zoom: 13,
                        center: myLatlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        title: points[0][2],
                        icon: baseUrl + '/images/map/map-dot-1.png'
                    });
                    marker.setMap(map);
                    drawMap();
                }

                function updateMap(){
                    clearMap();
                    drawMap();
                }
                function drawMap(){
                    var myLatlng = new google.maps.LatLng(points[0][0], points[0][1]);
                    map.setCenter(myLatlng);
                    for(var i = 0; i < points.length; i++){
                        var point = points[i];
                        var latlng = new google.maps.LatLng(point[0], point[1]);
                        var marker = new google.maps.Marker({
                            position: latlng,
                            title: points[0][2],
                            icon: baseUrl + '/images/map/map-dot-' + (i+1) + '.png'
                        });
                        flightPlanCoordinates.push(latlng);
                        markersArray.push(marker);
                    }
                    for(var i = 0; i < markersArray.length; i++){
                        var marker = markersArray[i];
                        marker.setMap(map);
                    }
                    flightPath = new google.maps.Polyline({
                        path: flightPlanCoordinates,
                        strokeColor: "#FF0000",
                        strokeOpacity: 1.0,
                        strokeWeight: 2
                    });

                    flightPath.setMap(map);
                }

                function clearMap(){
                    for(var i = 0; i < markersArray.length; i++){
                        var marker = markersArray[i];
                        marker.setMap(null);
                    }
                    flightPath.setMap(null);
                    flightPlanCoordinates = [];
                    markersArray = [];
//                    flightPlanCoordinates.length = 0;
//                    markersArray.length = 0;
                }
            </script>
        </wicket:head>
    </head>
    <body>
        <wicket:panel>
            <div id="map_canvas">

            </div>
        </wicket:panel>
    </body>
</html>

## MapPanel.java
package topriddy; //package name stripped.

import java.util.List;
import java.util.Map;
import org.apache.log4j.Logger;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.util.ListModel;
import org.apache.wicket.request.Url;
import org.apache.wicket.request.cycle.RequestCycle;
import org.apache.wicket.util.string.AppendingStringBuffer;

/**
 *
 * @author topriddy
 */
public final class MapPanel extends Panel {

    private static Logger logger = Logger.getLogger(MapPanel.class);
    ListModel<Map<String, String>> pointsModel;

    public MapPanel(String id, List<Map<String, String>> points) {
        super(id);
        pointsModel = new ListModel(points);
    }

    @Override
    public void renderHead(IHeaderResponse response) {
        response.renderJavaScriptReference("http://maps.googleapis.com/maps/api/js?sensor=false");
        AppendingStringBuffer buffer = new AppendingStringBuffer();
        if (!pointsModel.getObject().isEmpty()) {
            buffer.append("var points = ").append(getPointDataAsStringArray()).append(";");
        } else {
            buffer.append("var points = [[0,0,'N/A']];");
        }
        buffer.append("var baseUrl = '" + getBaseUrl() + "';");
        response.renderJavaScript(buffer.toString(), null);
    }

    public void updateMap(List<Map<String, String>> points) {
        this.pointsModel.setObject(points);
        AppendingStringBuffer buffer = new AppendingStringBuffer();
        if (points == null || points.isEmpty()) {
            buffer.append("points = [[0,0,'N/A']];");
        } else {
            buffer.append("points = ").append(getPointDataAsStringArray()).append(";");
        }
        buffer.append("updateMap();");
        AjaxRequestTarget target = AjaxRequestTarget.get();
        if (target != null) {
            target.appendJavaScript(buffer.toString());
        }
    }

    private String getPointDataAsStringArray() {
        List<Map<String, String>> list = pointsModel.getObject();
        StringBuilder builder = new StringBuilder();
        builder.append("[");
        for (int i = 0; i < list.size(); i++) {
            Map<String, String> map = list.get(i);
            String latitude = map.get("latitude");
            String longitude = map.get("longitude");
            String title = map.get("address");
            builder.append("[").append(latitude).append(",").append(longitude).append(",'").append(title).append("']");
            if (i != (list.size() - 1)) {
                builder.append(", ");
            }
        }
        builder.append("]");
        logger.debug(builder.toString());
        return builder.toString();
    }

    private String getBaseUrl() {
        String baseUrl = "";
        Url url = RequestCycle.get().getRequest().getClientUrl();
        baseUrl += "http://" + url.getHost() + ":" + url.getPort();
        return baseUrl;
    }
}
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns:wicket>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>TrackListMapPanel</title>
	<wicket:head>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<style type="text/css">
	#map_canvas{
	margin: 0;
	padding:0;
	height: 400px;
	}
	</style>
	<script type="text/javascript">
	$(function(){
	initialize();
	});

	var map;
	var markersArray = [];
	var flightPlanCoordinates = [];
	var flightPath;

	function initialize(){
	var myLatlng;
	if (points.length > 0){
	myLatlng = new google.maps.LatLng(points[0][0], points[0][1]);
	}else{

	}
	var myOptions = {
	zoom: 13,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var marker = new google.maps.Marker({
	position: myLatlng,
	title: points[0][2],
	icon: baseUrl + '/images/map/map-dot-1.png'
	});
	marker.setMap(map);
	drawMap();
	}

	function updateMap(){
	clearMap();
	drawMap();
	}
	function drawMap(){
	var myLatlng = new google.maps.LatLng(points[0][0], points[0][1]);
	map.setCenter(myLatlng);
	for(var i = 0; i < points.length; i++){
	var point = points[i];
	var latlng = new google.maps.LatLng(point[0], point[1]);
	var marker = new google.maps.Marker({
	position: latlng,
	title: points[0][2],
	icon: baseUrl + '/images/map/map-dot-' + (i+1) + '.png'
	});
	flightPlanCoordinates.push(latlng);
	markersArray.push(marker);
	}
	for(var i = 0; i < markersArray.length; i++){
	var marker = markersArray[i];
	marker.setMap(map);
	}
	flightPath = new google.maps.Polyline({
	path: flightPlanCoordinates,
	strokeColor: "#FF0000",
	strokeOpacity: 1.0,
	strokeWeight: 2
	});

	flightPath.setMap(map);
	}

	function clearMap(){
	for(var i = 0; i < markersArray.length; i++){
	var marker = markersArray[i];
	marker.setMap(null);
	}
	flightPath.setMap(null);
	flightPlanCoordinates = [];
	markersArray = [];
	// flightPlanCoordinates.length = 0;
	// markersArray.length = 0;
	}
	</script>
	</wicket:head>
	</head>
	<body>
	<wicket:panel>
	<div id="map_canvas">

	</div>
	</wicket:panel>
	</body>
	</html>
	package topriddy; //package name stripped.

	import java.util.List;
	import java.util.Map;
	import org.apache.log4j.Logger;
	import org.apache.wicket.ajax.AjaxRequestTarget;
	import org.apache.wicket.markup.html.IHeaderResponse;
	import org.apache.wicket.markup.html.panel.Panel;
	import org.apache.wicket.model.util.ListModel;
	import org.apache.wicket.request.Url;
	import org.apache.wicket.request.cycle.RequestCycle;
	import org.apache.wicket.util.string.AppendingStringBuffer;

	/**
	*
	* @author topriddy
	*/
	public final class MapPanel extends Panel {

	private static Logger logger = Logger.getLogger(MapPanel.class);
	ListModel<Map<String, String>> pointsModel;

	public MapPanel(String id, List<Map<String, String>> points) {
	super(id);
	pointsModel = new ListModel(points);
	}

	@Override
	public void renderHead(IHeaderResponse response) {
	response.renderJavaScriptReference("http://maps.googleapis.com/maps/api/js?sensor=false");
	AppendingStringBuffer buffer = new AppendingStringBuffer();
	if (!pointsModel.getObject().isEmpty()) {
	buffer.append("var points = ").append(getPointDataAsStringArray()).append(";");
	} else {
	buffer.append("var points = [[0,0,'N/A']];");
	}
	buffer.append("var baseUrl = '" + getBaseUrl() + "';");
	response.renderJavaScript(buffer.toString(), null);
	}

	public void updateMap(List<Map<String, String>> points) {
	this.pointsModel.setObject(points);
	AppendingStringBuffer buffer = new AppendingStringBuffer();
	if (points == null \|\| points.isEmpty()) {
	buffer.append("points = [[0,0,'N/A']];");
	} else {
	buffer.append("points = ").append(getPointDataAsStringArray()).append(";");
	}
	buffer.append("updateMap();");
	AjaxRequestTarget target = AjaxRequestTarget.get();
	if (target != null) {
	target.appendJavaScript(buffer.toString());
	}
	}

	private String getPointDataAsStringArray() {
	List<Map<String, String>> list = pointsModel.getObject();
	StringBuilder builder = new StringBuilder();
	builder.append("[");
	for (int i = 0; i < list.size(); i++) {
	Map<String, String> map = list.get(i);
	String latitude = map.get("latitude");
	String longitude = map.get("longitude");
	String title = map.get("address");
	builder.append("[").append(latitude).append(",").append(longitude).append(",'").append(title).append("']");
	if (i != (list.size() - 1)) {
	builder.append(", ");
	}
	}
	builder.append("]");
	logger.debug(builder.toString());
	return builder.toString();
	}

	private String getBaseUrl() {
	String baseUrl = "";
	Url url = RequestCycle.get().getRequest().getClientUrl();
	baseUrl += "http://" + url.getHost() + ":" + url.getPort();
	return baseUrl;
	}
	}