Google Maps API V3 not showing map

Question

Okay so I have a PHP script which handles file uploads, KML files specifically, extracts the center point and the location of the uploaded file, saves these details in text files, and then loads another page via "header". This other page then uses AJAX calls to set variable names as gathered from the text files, for the location of the KML file and the center point, in order to call the Google Maps API to show the KML layer upon a map.

That is what is supposed to happen, but instead nothing appears. I browse for my KML file, hit the upload button, and a blank page is shown. When I check my server, the file as been uploaded and the relevant details written into their respective text files, so obviously something is going wrong when I try to call the Google Maps API.

PHP upload and file info saving:

<?php
//Check that we have a file
if((!empty($_FILES["UploadedFile"])) && ($_FILES['UploadedFile']['error'] == 0)) {
  //Check if the file is JPEG image and it's size is less than 3Mb
  $filename = basename($_FILES['UploadedFile']['name']);
  $ext = substr($filename, strrpos($filename, '.') + 1);
  if (($ext == "kml") && ($_FILES["UploadedFile"]["size"] < 3145728)) {
    //Determine the path to which we want to save this file
      $newname = dirname(__FILE__).'/kml/'.$filename;
      //Check if the file with the same name is already exists on the server
      if (!file_exists($newname)) {
        //Attempt to move the uploaded file to it's new place
        if ((move_uploaded_file($_FILES['UploadedFile']['tmp_name'],$newname))) {
           findCenter($newname);
           saveName($newname);
        } else {
           echo "Error: A problem occurred during file upload!";
        }
      } else {
         echo "Error: File ".$_FILES["UploadedFile"]["name"]." already exists";
      }
  } else {
     echo "Error: Only .kml files under 3Mb are accepted for upload";
  }
} else {
 echo "Error: No file uploaded";
}

function findCenter($file) {
   $kmlContent = file_get_contents($file);

   $startName = "#sh_green-circle";
   $endName = "#sh_red-circle";
   $startCoords = getCoords($kmlContent, $startName);
   $endCoords = getCoords($kmlContent, $endName);

   $startLat = substr($startCoords, strrpos($startCoords, ',') +1);
   $startLong = substr($startCoords, 0, strrpos($startCoords, ','));

   $endLat = substr($endCoords, strrpos($endCoords, ',') +1);
   $endLong = substr($endCoords, 0, strrpos($endCoords, ','));

   $midLat = ($startLat+$endLat)/2;
   $midLong = ($startLong+$endLong)/2;

   $midCoord = "$midLat,$midLong";

   $saveCenter = "kmlcenter.txt";
   $fh = fopen($saveCenter, 'w') or die ("Can't create file");
   $stringData = $midCoord;
   fwrite($fh, $stringData);
   fclose($fh);
}

function getCoords($kml, $name) {
   $startSearch = strpos($kml, $name);
   $midSearch = strpos($kml, "<coordinates>", $startSearch+1);
   $endSearch = strpos($kml, "</coordinates>", $midSearch+1);

   $longlat = substr($kml, $midSearch+13, $endSearch-($midSearch+13));
   return $longlat;
}

function saveName($filename) {
   $saveFile = "kmlfilename.txt";
   $fh = fopen($saveFile, 'w') or die("Can't create file");
   $stringData = "$filename";
   fwrite($fh, $stringData);
   fclose($fh);
   header("Location: initgmaps.html");
}
?>

Map intitialisation:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8P7CzxiwQFf-RdK9QVRpH9se8AsMSsjEsensor=false"></script>
<script type="text/javascript">
function initialize() {
  var kmlName = getName()
  var kmlCoords = getCoords()
  var mapcenter = new google.maps.LatLng(kmlCoords);
  var myOptions = {
    zoom: 11,
    center: mapcenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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

  var kmlLayer = new google.maps.KmlLayer(kmlName);
  kmlLayer.setMap(map);
}
</script>

Relevant AJAX functions:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function getName(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    var kmlName;
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser does not support AJAX.");
                return false;
            }
        }
    }
       // Create a function that will receive data sent from the server
       ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
               kmlName = ajaxRequest.responseText;   
               }
       }
       ajaxRequest.open("GET", "kmlfilename.txt", false);
       ajaxRequest.send(null);
}
//-->

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function getCoords(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    var kmlCoords;
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser does not support AJAX.");
                return false;
            }
        }
    }
       // Create a function that will receive data sent from the server
       ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
               kmlCoords = ajaxRequest.responseText;   
               }
       }
       ajaxRequest.open("GET", "kmlcenter.txt", false);
       ajaxRequest.send(null);
}
//-->

And of course in the body of initgmaps.html I have:

onload="initialize()"

infoArea is the ID for my inline frame.

Can anyone see why it doesn't load? I'm completely and utterly new to web development, learning as I go, so sorry if the code is terrible and I'm sure I've made some obvious errors. Many thanks.

Answer 1

the error might be caused by not following this format:

src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"

see, after "YOUR_API_KEY" there shouldn't be "sensor=false". try it. hope it works.

Answer 2

Try adding an ampersand '&' after your key and before the sensor=false parameter.

Additionally

var kmlCoords = getCoords()

is javascript, but function getCoords() is PHP. Javascript cannot execute a PHP function.

Answer 3

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8P7CzxiwQFf-RdK9QVRpH9se8AsMSsjEsensor=false"></script>

You have missed an ampersand here... Should be:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=[[YOUR-GMAPS-KEY]]&sensor=false"></script>

(Where [[YOUR-GMAPS-KEY]] is your Google Maps Key - "AIzaSyB8P7CzxiwQFf-RdK9QV...".)