Question

I'm using JSF 2.1, PrimeFaces 3.3.1. Trying to put Yandex Maps on my page, to show events on map. So, my xhtml:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  ...
  xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
    <ui:composition template="./Template.xhtml">
        <ui:define name="content">
            <script src="//api-maps.yandex.ru/2.0/?load=package.full;lang=ru-RU" type="text/javascript"></script>
            <script src="/js/yMapsEditableCircle.js" type="text/javascript"></script>-->
                <script type="text/javascript">
                        var myMapRes;
                        ymaps.ready(init);
                        function init() {
                            myMapRes = new ymaps.Map('resultMap', {
                                center:["#{calculatorGeo.cgm.selectedCity.latitude}", "#{calculatorGeo.cgm.selectedCity.longitude}"],
                                zoom:12
                            });
                            //taking coordinates from bean to js
                            var coords = ['#{calculatorGeo.cgm.coords}'];
                            //#{calculatorGeo.cgm.coords} - String variable containing smth like this: [54.9888,56.3434],[54.458,56.3456],...,[58.23458,55.2345]
                            var myCollection = [];
                            for (var i = 0; i<coords.length; i++) {
                                myCollection.push(new ymaps.Placemark(coords[i]));
                            }
                            var clusterer = new ymaps.Clusterer({preset: 'twirl#redClusterIcons',
                                gridSize: 100,
                                synchAdd: false,
                                minClusterSize: 2});
                            clusterer.add(myCollection);
                            myMapRes.geoObjects.add(clusterer);
                        }
                    </script>
                    <div id="resultMap" style="width:800px; height:600px; border: 1px solid"></div>
        </ui:define>
    </ui:composition>
</h:body>

Error in for statement in javascript, what am I doing wrong?

Error text: Fatal Error: Element type "coords.length" must be followed by either attribute specifications, ">" or "/>".

Tried to put js up to the tag, not worked too.

Was it helpful?

Solution

As you are writing XHTML you should define everything inside the script tag as CDATA:

<script type="text/javascript">
//<![CDATA[
    // Your JS-Code
//]]>
<script>

The error is because of the < in the head of the for loop.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top