无法在 JSP 中实现简单的自定义图标谷歌地图示例

Question

当我尝试在 Jetty 服务器上的 jsp 中实现以下简单示例时：https://developers.google.com/maps/documentation/javascript/examples/icon-simple 我得到一个 java.io.UTFDataFormatException 并且地图上没有显示任何图标 产生错误的代码是：

var image = 'images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image
});

如果我像下面这样注释掉标记的图标变量，那么一切正常。

var image = 'images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
    position: myLatLng,
    map: map
<!--  icon: image -->
});

虽然当然会显示标准的谷歌标记，而不是我想要的自定义图标。

这是我使用 jetty-maven-plugin 9.2.10.v20150310 的堆栈跟踪：

[INFO] Started Jetty Server
2015-04-23 19:32:35.640:WARN:oejs.ServletHandler:qtp1142653826-19: 
org.apache.jasper.JasperException: Unable to compile class for JSP
    at org.apache.jasper.JspCompilationContext.compile(JspCompilationContext.java:579)
    at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:357)
    at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:405)
    at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:349)
    at org.eclipse.jetty.jsp.JettyJspServlet.service(JettyJspServlet.java:107)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:790)
    at org.eclipse.jetty.servlet.ServletHolder.handle(ServletHolder.java:808)
    at org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1669)
    at org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter.doFilterInternal(OpenEntityManagerInViewFilter.java:113)
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:76)
    at org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1652)
    at org.eclipse.jetty.servlet.ServletHandler.doHandle(ServletHandler.java:585)
    at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:143)
    at org.eclipse.jetty.security.SecurityHandler.handle(SecurityHandler.java:577)
    at org.eclipse.jetty.server.session.SessionHandler.doHandle(SessionHandler.java:223)
    at org.eclipse.jetty.server.handler.ContextHandler.doHandle(ContextHandler.java:1127)
    at org.eclipse.jetty.servlet.ServletHandler.doScope(ServletHandler.java:515)
    at org.eclipse.jetty.server.session.SessionHandler.doScope(SessionHandler.java:185)
    at org.eclipse.jetty.server.handler.ContextHandler.doScope(ContextHandler.java:1061)
    at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:141)
    at org.eclipse.jetty.server.handler.ContextHandlerCollection.handle(ContextHandlerCollection.java:215)
    at org.eclipse.jetty.server.handler.HandlerCollection.handle(HandlerCollection.java:110)
    at org.eclipse.jetty.server.handler.HandlerWrapper.handle(HandlerWrapper.java:97)
    at org.eclipse.jetty.server.Server.handle(Server.java:497)
    at org.eclipse.jetty.server.HttpChannel.handle(HttpChannel.java:310)
    at org.eclipse.jetty.server.HttpConnection.onFillable(HttpConnection.java:257)
    at org.eclipse.jetty.io.AbstractConnection$2.run(AbstractConnection.java:540)
    at org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(QueuedThreadPool.java:635)
    at org.eclipse.jetty.util.thread.QueuedThreadPool$3.run(QueuedThreadPool.java:555)
    at java.lang.Thread.run(Thread.java:745)
Caused by: 
java.io.UTFDataFormatException: Invalid byte 1 of 1-byte UTF-8 sequence.
    at org.apache.jasper.xmlparser.UTF8Reader.invalidByte(UTF8Reader.java:621)
    at org.apache.jasper.xmlparser.UTF8Reader.read(UTF8Reader.java:486)
    at org.apache.jasper.xmlparser.XMLEncodingDetector.load(XMLEncodingDetector.java:961)
    at org.apache.jasper.xmlparser.XMLEncodingDetector.skipString(XMLEncodingDetector.java:916)
    at org.apache.jasper.xmlparser.XMLEncodingDetector.scanXMLDecl(XMLEncodingDetector.java:1164)
    at org.apache.jasper.xmlparser.XMLEncodingDetector.getEncoding(XMLEncodingDetector.java:116)
    at org.apache.jasper.xmlparser.XMLEncodingDetector.getEncoding(XMLEncodingDetector.java:104)
    at org.apache.jasper.compiler.ParserController.determineSyntaxAndEncoding(ParserController.java:304)
    at org.apache.jasper.compiler.ParserController.doParse(ParserController.java:183)
    at org.apache.jasper.compiler.ParserController.parseDirectives(ParserController.java:117)
    at org.apache.jasper.compiler.Compiler.generateJava(Compiler.java:194)
    at org.apache.jasper.compiler.Compiler.compile(Compiler.java:356)
    at org.apache.jasper.compiler.Compiler.compile(Compiler.java:336)
    at org.apache.jasper.compiler.Compiler.compile(Compiler.java:323)
    at org.apache.jasper.JspCompilationContext.compile(JspCompilationContext.java:564)
    at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:357)
    at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:405)
    at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:349)
    at org.eclipse.jetty.jsp.JettyJspServlet.service(JettyJspServlet.java:107)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:790)
    at org.eclipse.jetty.servlet.ServletHolder.handle(ServletHolder.java:808)
    at org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1669)
    at org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter.doFilterInternal(OpenEntityManagerInViewFilter.java:113)
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:76)
    at org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1652)
    at org.eclipse.jetty.servlet.ServletHandler.doHandle(ServletHandler.java:585)
    at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:143)
    at org.eclipse.jetty.security.SecurityHandler.handle(SecurityHandler.java:577)
    at org.eclipse.jetty.server.session.SessionHandler.doHandle(SessionHandler.java:223)
    at org.eclipse.jetty.server.handler.ContextHandler.doHandle(ContextHandler.java:1127)
    at org.eclipse.jetty.servlet.ServletHandler.doScope(ServletHandler.java:515)
    at org.eclipse.jetty.server.session.SessionHandler.doScope(SessionHandler.java:185)
    at org.eclipse.jetty.server.handler.ContextHandler.doScope(ContextHandler.java:1061)
    at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:141)
    at org.eclipse.jetty.server.handler.ContextHandlerCollection.handle(ContextHandlerCollection.java:215)
    at org.eclipse.jetty.server.handler.HandlerCollection.handle(HandlerCollection.java:110)
    at org.eclipse.jetty.server.handler.HandlerWrapper.handle(HandlerWrapper.java:97)
    at org.eclipse.jetty.server.Server.handle(Server.java:497)
    at org.eclipse.jetty.server.HttpChannel.handle(HttpChannel.java:310)
    at org.eclipse.jetty.server.HttpConnection.onFillable(HttpConnection.java:257)
    at org.eclipse.jetty.io.AbstractConnection$2.run(AbstractConnection.java:540)
    at org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(QueuedThreadPool.java:635)
    at org.eclipse.jetty.util.thread.QueuedThreadPool$3.run(QueuedThreadPool.java:555)
    at java.lang.Thread.run(Thread.java:745)

提前感谢任何指点！

编辑：更改了最新的 jetty-server 9.2.10.v20150310 生成的堆栈跟踪

Answer 1

您必须修改图片的路径或将图标上传到您自己的服务器。

如果您看不到标记，则可能找不到图像。

他们使用相对 URL 'images/beachflag.png' 在示例中指向：

https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png 

---

      function initialize() {
        var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);

        var map = new google.maps.Map(document.getElementById("map-canvas"), {
          center: myLatLng,
          zoom: 10
        });
        var image = 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png';

        var beachMarker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);

      html {
        height: 100%
      }
      body {
        height: 100%;
        margin: 0;
        padding: 0
      }
      #map-canvas {
        height: 100%
      }

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3">
</script>
<div id="map-canvas"></div>