Google map with an Mysql database ERROR?

Dear community, I have been working on a Google map made with the Google map Api. Me and a friend have been working on this code for a while and can not seem to figure out, why the array data is not showing a marker on the map that should be pulling the locations from the database as followed with the table columns:

ID, Name, Type, Phone, Website, Lat, Lon, Skills

The issue with the code that we need help with is getting the locations from the database to show on the map as a marker, and show the data in the info window, from the columns: Name, Type, Website, and skills. However, right now the data comes from the code below and not the database, we were able to setup the MySQL connection and able to get the arrays or data from the databse into a console log. now we need help with getting that data from database into the locations showing a marker for each new row.

/Start/

<script type="text/javascript"> var locations = []; <?php $mysql_host = "localhost"; $mysql_user = "root"; $mysql_password = ""; $database = "find_a_designer";

$connect = mysql_connect($mysql_host,$mysql_user,$mysql_password) or die(mysql_error());


mysql_select_db($database,$connect) or die(mysql_error());

$query = "select * from markers";
$result = mysql_query($query,$connect);
while($row = mysql_fetch_array($result))
{
  //echo 'var tempArray = ["'.$row['name'].'","'.$row['address'].'","'.$row['lat'].'","'.$row['lon'].'","'.$row['description'].'"];';
  echo 'var tempArray = ["'.$row['name'].'","'.$row['type'].'","'.$row['phone'].'","'.$row['website'].'","'.$row['lat'].'","'.$row['lon'].'","'.$row['skills'].'"];';
  //echo 'console.log(locations);';
  echo 'locations.push(tempArray);';
}

?>

</script> <script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script>

<script> google.maps.event.addDomListener(window, 'load', init); var map; function init() { var mapOptions = { center: new google.maps.LatLng(48.981376,-90.832107), zoom: 4, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.DEFAULT, }, disableDoubleClickZoom: true, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, }, scaleControl: true, scrollwheel: true, panControl: true, streetViewControl: false, draggable : true, overviewMapControl: true, overviewMapControlOptions: { opened: false, }, mapTypeId: google.maps.MapTypeId.ROADMAP, } var mapElement = document.getElementById('find_a_designer_locations'); var map = new google.maps.Map(mapElement, mapOptions); var locations = [ ['Name', 'Web Designer/Developer', '716-123-4567', 'undefined', 'www.google.com', 42.88644679999999, -78.8783689, ''], ['Joe Bob', 'C++ Developer', '716-123-4567', 'undefined', 'www.test.com', 39.07667719394934, -94.5507798390625, ''], ['Nick john', 'Developer', '716-123-4567', 'undefined', 'www.test.com', 24.07667719394934, -93.5507798390625, ''], ['William', 'test', '716-123-4567', 'undefined', 'www.test.com', 39.07667719394934, -94.5507798390625, ''], ['John', 'Artist', '716-143-4567', 'undefined', 'www.test.com', 53.07667719394934, -72.5507798390625, ''] ];

    console.log(locations[0][5]);
    console.log(locations[0][6]);


    for (i = 0; i < locations.length; i++) {
        if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
        if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
        if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
       if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
       if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
        marker = new google.maps.Marker({
            icon: 'http://www.upc.edu/parcupc/wp-content/themes/parcupc/images/mark.png',
            position: new google.maps.LatLng(locations[i][5], locations[i][6]),
            map: map,
            title: locations[i][0],
            desc: description,
            tel: telephone,
            email: email,
            web: web
        });

if (web.substring(0, 7) != "http://") { link = "http://" + web; } else { link = web; } bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link); } function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) { var infoWindowVisible = (function () { var currentlyVisible = false; return function (visible) { if (visible !== undefined) { currentlyVisible = visible; } return currentlyVisible; }; }()); iw = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'click', function() { if (infoWindowVisible()) { iw.close(); infoWindowVisible(false); } else { var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>"+title+"</h4><p>"+desc+"<p><p>"+telephone+"<p><a href='"+link+"'' >"+web+"<a></div>"; iw = new google.maps.InfoWindow({content:html}); iw.open(map,marker); infoWindowVisible(true); } }); google.maps.event.addListener(iw, 'closeclick', function () { infoWindowVisible(false); }); } } </script> <style> #find_a_designer_locations { height:600px; width:1024px; } .gm-style-iw * { display: block; width: 100%; } .gm-style-iw h4, .gm-style-iw p { margin: 0; padding: 0; } .gm-style-iw a { color: #4272db; } </style>

<div id='find_a_designer_locations'></div>

/END/

Thanks.