locked
Assistance to Clear JS Error in Map Markers RRS feed

  • Question

  • User-354131114 posted

    I am receiving an error when the following HTML code is executed.  The JS error is Line 235/13 Error: Unterminated string constant. Code 0. this is the beginning of

    var markerArray = eval(markers); in the code below.  The data is pulled from an SQL database. Any assistance would be welcomed.

    <!doctype html>
    <!-- version: 3.3.0.43; -->
    <!-- debug path: gis.realitymobile.com\v.3.3.0\GoogleMaps\GM_v3.htm-->
    <html>
    <head>

    <title>Google Maps</title>
    <!-- modify version number to use 3.29 version -->

    <script src="https://maps.google.com/maps/api/js?&v=3.29&key=Not displayed" type="text/javascript"></script>
    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    /* IE-only trick.
    Can achieve a similar effect (x-browser) using 5 draws (one white, 4 black, offset by 1 pixel each corner) */
    .outline { FILTER: Glow(Color=#000000, strength=3); ; font-size:10pt; color: #ffffff; width: 300px; font-family: Arial; font-weight: bold; }
    </style>

    <style>
    .infomsg {display:none;}
    </style>

    <!-- Debug for Onion.js error -->
    <script src="https://cdn.jsdelivr.net/json3/3.3.2/json3.js"></script>
    <script type="text/javascript">

    var PATH_COLOR = "#006400";
    var PATH_OPACITY = 0.5;
    var PATH_WIDTH = 8;

    function LabeledMarker(latlng, options) {
    this.latlng = latlng;
    this.image = options.image;
    this.labelName = options.labelName || "";
    this.labelDesc = options.labelDesc || "";
    this.lableLongDesc = options.labelLongDesc || "";
    this.labelClass = options.labelClass || "markerLabel";
    this.labelOffset = options.labelOffset || new google.maps.Size(0, 0);
    this.clickable = options.clickable || true;
    if (options.draggable) {
    // This version of LabeledMarker doesn't support dragging.
    options.draggable = false;
    }

    this.infoWindow = null;
    this.div = null;
    }

    LabeledMarker.prototype = new google.maps.OverlayView();

    LabeledMarker.prototype.onAdd = function() {
    this.div = createDivLabel(this);
    this.getPanes().overlayLayer.appendChild(this.div);

    if (this.clickable) {
    // Pass through events fired on the div to the marker.
    var eventPassthrus = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout'];
    for (var i = 0; i < eventPassthrus.length; i++) {
    var name = eventPassthrus[i];
    google.maps.event.addDomListener(this.div, name, newEventPassthru(this, name));
    }
    // Mouseover behaviour for the cursor.
    this.div.style.cursor = "pointer";
    }
    }

    LabeledMarker.prototype.draw = function() {
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

    this.div.style.left = (point.x - this.image.anchor.x) + 'px';
    this.div.style.top = (point.y - this.image.anchor.y) + 'px';
    }

    LabeledMarker.prototype.onRemove = function() {
    this.div.parentNode.removeChild(this.div);
    this.div = null;
    }

    function createDivLabel(owner) {
    var div = document.createElement("div");
    div.style.border = "none";
    div.style.borderWidth = "0px";
    div.style.position = "absolute";

    var img = document.createElement("img");
    img.src = owner.image.url;
    div.appendChild(img);

    var span = document.createElement("span");
    span.innerHTML = owner.labelName
    span.className = owner.labelClass;
    span.style.left = (owner.image.size.width + owner.labelOffset.width) + "px";
    span.style.top = owner.labelOffset.height + "px";
    div.appendChild(span);
    return div;
    }
    function newEventPassthru(obj, event) {
    return function() {
    google.maps.event.trigger(obj, event);
    };
    }

    function getNewMarkerOverlay(marker) {
    var image = new google.maps.MarkerImage(marker.ImageUrl);
    image.size = new google.maps.Size(32, 32);
    image.anchor = new google.maps.Point(16, 16);

    var options = new Object();
    options.labelName = marker.Name;
    options.title = marker.Name;
    options.labelClass = "outline";
    options.labelOffset = new google.maps.Size(4, 2);
    options.image = image;

    return new LabeledMarker(new google.maps.LatLng(marker.Latitude, marker.Longitude), options);
    }

    function setupBalloon(markerData, markerOverlay) {
    var latLng = new google.maps.LatLng(markerData.Latitude, markerData.Longitude);

    google.maps.event.addListener(markerOverlay, 'mouseover', function() {
    infoWindow.close();

    geocoder.geocode({'latLng': latLng}, function(results, status) {
    var html = markerData.Name + '<br/><br/>' + markerData.Description;

    if (results && status == google.maps.GeocoderStatus.OK) {
    html += '<br/><br/>' + results[0].formatted_address;
    }

    infoWindow.setPosition(latLng);
    infoWindow.setContent(html);
    infoWindow.open(map);
    });
    });
    }

    // associative array - string keys, array of overlay values
    var featureOverlays = [];
    function setFeatureOverlays(featureName, overlayArray)
    {
    var oldOverlays = featureOverlays[featureName];
    if (undefined == oldOverlays) {
    featureOverlays[featureName] =[];
    }
    else {
    // remove former overlays
    for (var i = 0; i < oldOverlays.length; i++) {
    oldOverlays[i].setMap(null);
    }
    }

    featureOverlays[featureName] = [];

    // add new overlays
    for (var i = 0; i < overlayArray.length; i++) {
    featureOverlays[featureName].push(overlayArray[i]);
    overlayArray[i].setMap(map);
    }
    }

    var map;
    var geocoder;
    var infoWindow;
    var ready = false;

    function init() {
    geocoder = new google.maps.Geocoder();

    infoWindow = new google.maps.InfoWindow();

    var latlng = new google.maps.LatLng(0, -77.0364);
    var options = {
    scrollwheel: true,

    zoom: 1,
    center: latlng,

    mapTypeId: google.maps.MapTypeId.HYBRID,

    mapTypeControl: true,
    mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE],
    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    },

    zoomControl: true,
    zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE
    },
    scaleControl: true,

    panControl: true,

    rotateControl: false
    };

    map = new google.maps.Map(document.getElementById("map"), options);

    ready = true;
    }

    function isReady() {
    return ready;
    }

    function getVersion() {
    return "3.x";
    }

    function clear() {
    for (var name in featureOverlays) {
    setFeatureOverlays(name, []);
    }
    }

    function centerAndZoom(neLat, neLng, swLat, swLng) {
    var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(swLat, swLng), new google.maps.LatLng(neLat, neLng));
    map.fitBounds(bounds);
    }

    function centerAndZoomIfNecessary(neLat, neLng, swLat, swLng) {
    centerAndZoom(neLat, neLng, swLat, swLng);
    }

    function panToLocation(lat, lng) {
    map.panTo(new google.maps.LatLng(lat, lng));
    }

    function centerOnLocation(lat, lng) {
    map.setCenter(new new google.maps.LatLng(lat, lng));
    }

    function setFeatureMarkers(featureName, markers) {

    //Error reported at Line 235 Char 13 Unterminated string constant Code 0

    var markerArray = eval(markers);
    var overlays = [];
    for (var i = 0; i < markerArray.length; i++) {
    var markerData = markerArray[i];
    var markerOverlay = getNewMarkerOverlay(markerData);
    setupBalloon(markerData, markerOverlay);
    overlays.push(markerOverlay);
    }
    setFeatureOverlays(featureName, overlays);
    }

    function drawPositionsOverTime(featureName, markers, showLines, showMarkers) {
    var markerArray = eval(markers);
    var pathOverlayObjects = [];

    if (showLines) {
    var latLngArray = [];
    for (var i = 0; i < markerArray.length; i++) {
    latLngArray.push(new google.maps.LatLng(markerArray[i].Latitude, markerArray[i].Longitude));
    }

    pathOverlayObjects.push(new google.mapsPolyline( {
    path: latLngArray,
    strokeColor: PATH_COLOR,
    strokeWidth: PATH_WIDTH,
    strokeOpacity: PATH_OPACITY
    }));
    }

    if (showMarkers) {
    var markerOverlays = [];
    for (var i = 0; i < markerArray.length; i++) {
    var markerOverlay = getNewMarkerOverlay(markerArray[i]);
    setupBalloon(markerArray[i], markerOverlay);

    pathOverlayObjects.push(markerOverlay);
    }
    }

    setFeatureOverlays(featureName, pathOverlayObjects);
    }


    function getCurrentView()
    {
    var center = map.getCenter();
    return center.lat() + '|' + center.lng();
    }
    function getViewingArea() {
    var bounds = map.getBounds();
    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();
    return ne.lat() + '|' + sw.lng() + '|' + ne.lat() + '|' + ne.lng() + '|' + sw.lat() + '|' + sw.lng() + '|' + sw.lat() + '|' + ne.lng();
    }

    function getCurrentView() {
    var center = map.getCenter();
    return center.lat() + '|' + center.lng();
    }

    </script>
    </head>
    <body onload="init();">
    <div id="map" style="; top:0; left:0; width:100%; height:100%" />
    </body>


    </html>

    Tuesday, January 30, 2018 7:13 PM

All replies