2013-11-04 171 views
0

我想加載這個谷歌地圖畫布,它只是不會工作。谷歌示例工程,這表明這是一個代碼錯誤。無法加載Javascript

任何人都可以在這段代碼中看到任何錯誤?

我加入它變成一個DIV地圖畫布的DIV ID

var marker; 
    var infowindow; 

    function initialize() { 
     var latlng = new google.maps.LatLng(54.559322, -4.174804); 
     var options = { 
     zoom: 6, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("map-canvas"), options); 
     var html = "<table>" + 
       "<tr><td>Username:</td> <td><input type='text' id='userid'/> </td> </tr>" + 
       "<tr><td>Fish Species:</td> <td><select id='fishspecies'>" + 
         "<option value='Bass' SELECTED>Bass</option>" + 
         "<option value='Cod'>Cod</option>" + 
         "<option value='Gurnard'>Gurnard</option>" +   
         "<option value='Flatty'>Flatty</option>" + 
         "<option value='Mackeral'>Mackeral</option>" + 
         "<option value='Whiting'>Whiting</option>" + 
         "<option value='Pollack'>Pollack</option>" + 
         "<option value='Wrasse'>Wrasse</option>" + 
         "<option value='Garfish'>Garfish</option>" + 
       "<option value='Blank'>Blank</option>" +        
       "<tr><td>Catch Method:</td> <td><select id='catchmethod'>" + 
         "<option value='Beach' SELECTED>Beach</option>" + 
         "<option value='Boat'>Boat</option>" + 
         "<option value='Spinning'>Spinning</option>" + 
       "<option value='Pier'>Pier</option>" + 

       "<tr><td>Bait:</td> <td><select id='bait'>" + 
         "<option value='Lugworm' SELECTED>Lugworm</option>" + 
         "<option value='Mackerel'>Makerel</option>" + 
         "<option value='Ragworm' >Ragworm</option>" + 
         "<option value='Livebait'>Livebait</option>" + 
         "<option value='Squid'>Squid</option>" + 
         "<option value='Peeler'>Peeler</option>" + 

       "<tr><td>Size LB:</td> <td><input type='text' id='sizelb'/> </td> </tr>" +    
       "<tr><td>Month Caught:</td> <td><select id='month'>" + 
         "<option value='January' SELECTED>January</option>" + 
         "<option value='February'>February</option>" + 
         "<option value='March'>March</option>" +   
         "<option value='April'>April</option>" + 
         "<option value='May'>May</option>" + 
         "<option value='June'>June</option>" + 
         "<option value='July'>July</option>" + 
         "<option value='August'>August</option>" + 
         "<option value='September'>September</option>" + 
       "<option value='October'>October</option>" + 
       "<option value='November'>November</option>" + 
       "<option value='December'>December</option>" + 
       "</select> </td></tr>" + 
       "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>"; 
infowindow = new google.maps.InfoWindow({ 
    content: html 
    }); 

    google.maps.event.addListener(map, "click", function(event) { 
     marker = new google.maps.Marker({ 
      position: event.latLng, 
      map: map 
     }); 
     google.maps.event.addListener(marker, "click", function() { 
      infowindow.open(map, marker); 
     }); 


    }); 
    } 
    function saveData() { 
     var userid = document.getElementById("userid").value; 
     var fishspecies = escape(document.getElementById("fishspecies").value); 

     var catchmethod = escape(document.getElementById("catchmethod").value); 
     var bait = document.getElementById("bait").value; 

     var sizelb = document.getElementById("sizelb").value; 
     var month = document.getElementById("month").value; 

     var latlng = marker.getPosition();    
    var url = "phpsqlinfo_addrow.php?fishspecies=" + fishspecies + "&catchmethod=" + catchmethod + "&bait=" + bait + "&month=" + month + "&lat=" + latlng.lat() + "&lng=" + latlng.lng() + "&sizelb=" + sizelb + "&userid=" + userid; 
     downloadUrl(url, function(data, responseCode) { 
     if (responseCode == 200 && data.length <= 1) { 
      infowindow.close(); 
      document.getElementById("message").innerHTML = "Fish added" 
     } 
     }); 
    } 

    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request.responseText, request.status); 
     } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
    } 

    function doNothing() 
    google.maps.event.addDomListener(window, "load", initialize); 
+2

可以重現錯誤與小提琴? – karthikr

+0

您的XML有效嗎? – geocodezip

+0

我用你的代碼看到一張地圖。你甚至沒有收到地圖嗎?你給了地圖 - 畫布div一個大小? – geocodezip

回答

0

你的CSS是錯誤的。該地圖不具有大小:

.map-canvas { 
     width: 400px; 
     height: 400px; 
} 

應該是:

#map-canvas { 
     width: 400px; 
     height: 400px; 
} 

working fiddle

+0

偉大的作品!但爲什麼? – user2932546

+0

因爲.map-canvas不正確(你沒有類「map-canvas」的div),你確實有一個id爲「map-canvas」的div(這就是「#」的意思) 。 – geocodezip