Unexpected token < Javascript code in PHP

Question

Hello I have a file with the next code, a file named google-maps.php

<script>
    var customIcons = {
        restaurant: {
            icon: 'img/homepage/pin.png'
        },
        cafenele: {
            icon: 'img/homepage/pni2.png'
        }
    };


    var markerGroups = {
        "restaurant": [],
        "cafenele": []
    };



    function load() {
        var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(47.059516, 21.947613),
            zoom: 13,
            scrollwheel: false,
            mapTypeId: 'roadmap'
        });
        var infoWindow = new google.maps.InfoWindow();
        // Change this depending on the name of your PHP file

        var bounds = new google.maps.LatLngBounds();
        downloadUrl("googlemaps/phpsqlajax_genxml2.php", function (data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
                var id_marker = markers[i].getAttribute("id_marker");
                var name = markers[i].getAttribute("name");
                var category = markers[i].getAttribute("category");
                var address = markers[i].getAttribute("address");
                var img = markers[i].getAttribute("img");
                var phone = markers[i].getAttribute("phone");
                var schedule = markers[i].getAttribute("schedule");
                var link = markers[i].getAttribute("link");
                document.getElementById('categorii').src = img;
                var type = markers[i].getAttribute("type");

                var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lng")));
                bounds.extend(point);
                var html = "<u class='title-google-maps'>" + name + "</u> <p class='google-maps'>" + category + "</p>" + address + "<p class='google-maps'>" + phone + "</p>" + "<p class='google-maps-2'>" + schedule + "</p>" + link;
                var icon = customIcons[type] || {};
                var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon.icon,
                    id_marker: id_marker,
                    image: img,
                    type: type

                });

                if (!markerGroups[type])
                    markerGroups[type] = [];
                markerGroups[type].push(marker);
                marker.setVisible(false);
                bindInfoWindow(marker, map, infoWindow, html);

            }
            map.fitBounds(bounds);
            toggleGroup("spa");

        });

    }


    function toggleGroup(type)
    {

        for (var key in markerGroups)
        {
            for (var i = 0; i < markerGroups[key].length; i++)
            {
                var marker = markerGroups[key][i];

                if (type == key) {

                    marker.setVisible(true);

                } else
                {
                    marker.setVisible(false);
                }
            }

        }
    }





    function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);


            document.getElementById('categorii').src = marker.image;

        });
    }

    function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

        request.onreadystatechange = function () {
            if (request.readyState == 4) {
                request.onreadystatechange = doNothing;
                callback(request, request.status);
            }
        };

        request.open('GET', url, true);
        request.send(null);
    }

    function doNothing() {
    }
</script>

If I put my code in JS the code works but I need to put in PHP file in future I want to echo some data from database. The error I have in console is

Uncaught SyntaxError: Unexpected token<

. Why is working if the file type is JS and why is not working on PHP file type? What cand I do?

Answer 1

You need to close php tag before script and open in after script like this

<?php

  //some php code
?>
 <script>
  ...
  ..
</script>

<?php
 //php code
?>