Hi, i found this code online. After installing and running code on my website, the screen shows nothing back, though code is firmly in place.

    <script type='text/javascript' src='jquery-1.6.2.min.js'></script>
    <script type='text/javascript' src='jquery-ui-1.8.14.custom.min.js'></script>

        BODY {font-family : Verdana,Arial,Helvetica,sans-serif; color: #000000; font-size : 13px ; }

        #map_canvas { width:100%; height: 100%; z-index: 0; }
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" /></script>
    <script type='text/javascript'>

    //This javascript will load when the page loads.
    jQuery(document).ready( function($){

            //Initialize the Google Maps
            var geocoder;
            var map;
            var markersArray = [];
            var infos = [];

            geocoder = new google.maps.Geocoder();
            var myOptions = {
                  zoom: 9,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
            //Load the Map into the map_canvas div
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            //Initialize a variable that the auto-size the map to whatever you are plotting
            var bounds = new google.maps.LatLngBounds();
            //Initialize the encoded string       
            var encodedString;
            //Initialize the array that will hold the contents of the split string
            var stringArray = [];
            //Get the value of the encoded string from the hidden input
            encodedString = document.getElementById("encodedString").value;
            //Split the encoded string into an array the separates each location
            stringArray = encodedString.split("****");

            var x;
            for (x = 0; x < stringArray.length; x = x + 1)
                var addressDetails = [];
                var marker;
                //Separate each field
                addressDetails = stringArray[x].split("&&&");
                //Load the lat, long data
                var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
                //Create a new marker and info window
                marker = new google.maps.Marker({
                    map: map,
                    position: lat,
                    //Content is what will show up in the info window
                    content: addressDetails[0]
                //Pushing the markers into an array so that it's easier to manage them
                google.maps.event.addListener( marker, 'click', function () {
                    var info = new google.maps.InfoWindow({content: this.content});
                    //On click the map will load the info window
               //Extends the boundaries of the map to include this new location
            //Takes all the lat, longs in the bounds variable and autosizes the map

            //Manages the info windows
            function closeInfos(){
           if(infos.length > 0){
              infos.length = 0;


Php code here


        /*//Connect to the MySQL database that is holding your data, replace the x's with your data
        mysql_connect("localhost", "xxxxx_xxx", "xxxx") or
         die("Could not connect: " . mysql_error());

define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'msl');

        //Initialize your first couple variables
        $encodedString = ""; //This is the string that will hold all your location data
        $x = 0; //This is a trigger to keep the string tidy

        //Now we do a simple query to the database
        $query = "SELECT * FROM `poi`";
        $results=mysqli_query($conn, $query);
        //Multiple rows are returned
        while ($row = mysqli_fetch_array($results, MYSQL_NUM))
        //while($row = $results->fetch_assoc())
            //This is to keep an empty first or last line from forming, when the string is split
            if ( $x == 0 )
                 $separator = "";
                 //Each row in the database is separated in the string by four *'s
                 $separator = "****";
            //Saving to the String, each variable is separated by three &'s
            $encodedString = $encodedString.$separator.
            "<p class='content'><b>Lat:</b> ".$row[1].
            "<br><b>Long:</b> ".$row[2].
            "<br><b>Name: </b>".$row[3].
            "<br><b>Address: </b>".$row[4].
            "<br><b>Division: </b>".$row[5].
            $x = $x + 1;

        <input type="hidden" id="encodedString" name="encodedString" value="<?php echo $encodedString; ?>" />
    <div id="map_canvas"></div>

Edited by accra

3 Years
Discussion Span
Last Post by accra

Why not use this:

<iframe marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&hl=en&amp;geocode=&q=&amp;ie=UTF8&om=1&amp;&s=AARTsJpQqM3ktaXD4q9ItwThgIRSOtr4zg&ll=50.954966,0.493012&spn=0.018615,0.021458&amp;z=9&iwloc=A&amp;output=embed" frameborder="no" height="500" scrolling="no" width="500"></iframe>

Taken from here

Replace the &ll=50.954966,0.493012 bit with &ll=<?php echo $row[1].",".Row[2];?>

Then just echo out all of your other information and variables as normal :)


thanks for helping out, can you pls point to the line you referring to. Its abit difficult to locate, thanks.

I will also try out your example.


I just looked at yours, am trying to retrive lat and lon from mysql db, since the location will be changing on a minite bases...
Am not sure if your example will work. Please let me know, thanks...


<iframe marginheight="0" marginwidth="0" src="http://maps.google.com/maps? ... &ll=50.954966,0.493012&spn=0.018615,0.021458 ... output=embed" frameborder="no" height="500" scrolling="no" width="500"></iframe>

Change ll so ll=-YourLat-,-YourLong

So the end code would be like:

$src= "http://maps.google.com/maps?f=q&hl=en&amp;geocode=&q=&amp;ie=UTF8&om=1&amp;&s=AARTsJpQqM3ktaXD4q9ItwThgIRSOtr4zg&ll=".$row[1].",".$row[2]."&spn=0.018615,0.021458&amp;z=9&iwloc=A&amp;output=embed";
<iframe marginheight="0" marginwidth="0" src="<?= $src ?>" frameborder="no" height="500" scrolling="no" width="500"></iframe>

And do you mean the user will look at a map, and every now and then it will change? (if so, we'll have to sort you out with AJAX)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.