Untitled

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Frum London Directory Map</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" type="text/css" href="menu/menu_style.css" />

        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="menu/ie.css" />
        <![endif]-->

        <style type="text/css">#map_canvas {
            width:  100%;
            height: 500px;
        }</style>
    </head>

    <body bgcolor="#006" onload="initialize()">
        <!-- Title Logo -->

        <div align="center">
            <img src="logo.png" width="984" height="76" />
        </div>

        <div class="nav">
            <div class="table">
                <ul class="select">
                    <li><a href="" target="_self"><b>Kosher</b></a>
                        <div class="select_sub">
                            <ul class="sub">
                                <li><a href="" target="_self">Bakeries</a></li>
                                <li><a href="" target="_self">Cafes</a></li>
                                <li><a href="" target="_self">Restaurants</a></li>
                                <li><a href="" target="_self">Groceries</a></li>
                                <li><a href="" target="_self">Confectionary</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>

                <ul class="select">
                    <li><a href="" target="_self"><b>Religious</b></a>
                        <div class="select_sub">
                            <ul class="sub">
                                <li><a href="" target="_self">Shuls & Synagogues</a></li>
                                <li><a href="" target="_self">Tefillos</a></li>
                                <li><a href="" target="_self">Mincha</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>

                <ul class="select">
                    <li><a href="" target="_self"><b>Travel</b></a>
                        <div class="select_sub">
                            <ul class="sub">
                                <li><a href="" target="_self">Hotels</a></li>
                                <li><a href="" target="_self">Inns</a></li>
                                <li><a href="" target="_self">Tours</a></li>
                                <li><a href="" target="_self">Flights</a></li>
                                <li><a href="" target="_self">Taxis</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>

                <ul class="select">
                    <li><a href="" target="_self"><b>Business</b></a>
                        <div class="select_sub">
                            <ul class="sub">
                                <li><a href="" target="_self">Financial Services</a></li>
                                <li><a href="" target="_self">Property & Accomodation</a></li>
                                <li><a href="" target="_self">Precious Stones & Metals</a></li>
                                <li><a href="" target="_self">Information Technology</a></li>
                                <li><a href="" target="_self">Insurance</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div align="center">
            <table width="100%" height="35" align="center" bgcolor="#000">
                <tr>
                    <td>
                        <div class="menu">
                            <?php
                            // display below statement for informational purposes only, will later integrate conditions.
                            print "....Coordinates Loaded....";
                            ?>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <!-- map start -->

        <div class="menu2">
            <?php
            // kosher_london_bakeries.php code
            ini_set('display_errors', 1);
            error_reporting(E_ALL);

            $username = "***";
            $password = "***";
            $hostname = "***";
            $connect = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");

            $selected = mysql_select_db("datanalystcouk_434850_db1", $connect) or die("Could not select datanalystcouk_434850_db1");

            // run query on listings table returning matching category and areagroup
            $result1 = mysql_query("
                SELECT CategoryID1, Company, Latitude, Longitude, AreaGroup, Streetno, Address, Locality, City, PostalCode, PhoneNumber
                FROM DirectoryListings
                WHERE CategoryID1 ='420' AND AreaGroup = 'London' AND Latitude <> 0
                ORDER BY Company ASC
            ");

            /*
             * Changes by Werelds:
             * - Got rid of most variables; wasting time copying values when you can just use them straight up
             * - Got rid of the "counters" - just start from index 0 to keep things consistent
             * - PHP doesn't require an index when setting array values; you can push to an array by using []
             * - Refactored variable names into full names for clarity :P
             */
            $companies = array();

            // Simply store each row in an array
            while ($row = mysql_fetch_array($result1)) {
                $companies[] = $row;
            }

            /*
             * At this point $companies looks like this:
             * array(
             *   array(
             *     'Latitude' => xx.xxxxxx,
             *     'Longitude' => xx.xxxxxx,
             *     'Company' => 'Company 1',
             *   ),
             *   array(
             *     'Latitude' => xx.xxxxxx,
             *     'Longitude' => xx.xxxxxx,
             *     'Company' => 'Company 2',
             *   ),
             * )
             *
             * And so on. Note that AreaGroup and all the other fields are also in these arrays of course.
             */
            ?>
        </div>

        <div id="map_canvas"></div>

        <!-- Footer -->

        <div align="center" class="footer">
            Copyright Data Analyst Limited
        </div>

        <!--
            Fixed by Werelds: Moved this to the very bottom, as that's customary :)
            Keep JS at the very bottom of document body so that it always loads last.
        -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            /*
             * Now the awesome part: json_encode will turn the array above into an array of objects
             * An associative array in PHP (like the ones for each row above) becomes an object.
             *
             * This now allows you to actually do all of the JS work in JS.
             * The example array above will now be encoded to the following JSON:
             * [
             *   { "Latitude" => xx.xxxxxx, "Longitude" => xx.xxxxxx, "Company" => "Company 1" },
             *   { "Latitude" => xx.xxxxxx, "Longitude" => xx.xxxxxx, "Company" => "Company 2" },
             * ]
             *
             * This way you can avoid mixing PHP and JS, which is rarely a good idea.
             */
            var companies = <?php echo json_encode($companies); ?>;
            var markers = new Array();
            var map;

            var markerClick = function (event) {
                // Nasty, but we have to do it like this :(
                for (var i = 0; i < companies.length; i++) {
                    var company = companies[i];
                    var marker_coordinates = new google.maps.LatLng(company.Latitude, company.Longitude);

                    // Compare to the clicked LatLng
                    if (marker_coordinates.equals(event.latLng)) {
                        map.setCenter(marker_coordinates);
                        map.setZoom(16);

                        var infowindow = new google.maps.InfoWindow({
       content: '<b>' + company.Company + '</b> <br>' + company.Steetno + '<br>' + company.Address + '<br>' + company.Locality + '<br>' + company.City + '<br>' + company.PostalCode + '<br>' + company.PhoneNumber  + '<br>' + '</b><br>'
      });

                        infowindow.open(map, markers[i]);
                    }
                }
            };

            function initialize() {
                var myOptions = {
                    zoom: 10,
                    center: new google.maps.LatLng(51.5, -0.18),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

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

                // Add each marker
                for (var i = 0; i < companies.length; i++) {
                    var company = companies[i];

                    markers[i] = new google.maps.Marker({
                        position: new google.maps.LatLng(company.Latitude, company.Longitude),
                        title: company.Company,
                        map: map
                    });

                    // Don't forget to attach markerClick() to each of them
                    google.maps.event.addListener(markers[i], 'click', markerClick);
                }
            }
        </script>
    </body>
</html>