Reading latitude/longitude from DB and putting markers on the map

Question

Below is given my sample code. In index.php I define jquery tabs. One of the tabs should open a map (openlayers) and put markers on this map. Latitude and longitude of each marker is taken from MySQL DB. The problem is that I don't know how and where to execute the function put_marker reading data from DB. I know it should be a basic question.

index.php

    <script type="text/javascript">
              $(document).ready(function() {
                    $("#tabs").tabs({
                    ajaxOptions: {
                        success: function( html ) {
                            $("#content").html(html);
                            page_init();
                        }
                    }
                });
              });
</script>
    <div id="tabs">
        <ul>
            <li><a href="administration.php"><span>Administration</span></a></li>
            <li><a href="map.php"><span>Map</span></a></li>
        </ul>
    </div>

map.php

    <?php
        include_once 'include/DatabaseConnector.php';
        $query4="SELECT r.resLatitude, r.resLongitude FROM resources r;";
        $result4=DatabaseConnector::ExecuteQueryArray($query4);

        foreach ($result4 as $row):
// HERE I HAVE A PROBLEM
            //putMarker($row['resLatitude'],$row['resLongitude']);      
        endforeach;
    ?>
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script type="text/javascript">
            var map, layer;

            function page_init(){
                map = new OpenLayers.Map("basicMap");
                var mapnik         = new OpenLayers.Layer.OSM();
                var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
                var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
                var position       = new OpenLayers.LonLat(2.07833,41.2969).transform( fromProjection, toProjection);
                var zoom           = 15; 
                map.addLayer(mapnik);
                map.setCenter(position, zoom );
            }

            function putMarker(latMarca, lonMarca)
            {
                var lonLat = new OpenLayers.LonLat(lonMarca ,latMarca ).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
                var zoom=16;
                var markers = new OpenLayers.Layer.Markers( "Markers" );
                map.addLayer(markers);
                markers.addMarker(new OpenLayers.Marker(lonLat));
                map.setCenter (lonLat, zoom);
            }
        </script>
        <div id="basicMap" style="width: 100%; height: 100%;">

        </div>

Answer 1

Well, you're getting your markers in PHP on the server side. And you're passing them to Javascript on the client side. Two different places.

Actually, there's no need even in JSON manipulations in the simplest case. In your map.php you can do:

    ..
    echo '<script type="text/javascript">';
    echo '$(document).ready(function() {';
    foreach ($result4 as $row){
        echo 'putMarker('.$row['resLatitude'].','.$row['resLongitude'].');';      
    }
    echo '});';
    echo '</script>';
    ...

These code would be interpreted on the client side as pure JS, but with values being taken from the PHP.

By the way, it's not a good approach to write your code the same way. Look toward MVC frameworks , where the code and look are separated from each other.