Bootstrap Row，添加一個Google Map-Canvas

我有一個帶有地圖 - 畫布ID的腳本，它不會顯示在Bootstrap行中，自定義CSS反對＃map-canvas，任何人都可以幫助我？Bootstrap Row，添加一個Google Map-Canvas

CSS

html, body, #map-canvas { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
#map-canvas { 
    margin: 0; 
    padding: 0; 
    width:100%; 
    height:100%; 
}

HTML

<div class="row"> 
    <div class="col-xs-12"> 
     <div id="map-canvas"></div> 
    </div> 
</div>;

我的Javascript

<!DOCTYPE html > 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Fishtrends.com - 2013 - Tight Lines</title> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
    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() {} 
    </script>

來源

2013-11-03 user2932546

請把你的代碼的工作實例放在http://jsfiddle.net/ –

這裏你去http://jsfiddle.net/sVhqU/ – user2932546

你的例子不起作用，因爲初始化函數永遠不會被調用，並且請求您的本地腳本phpsqlinfo_addrow.php無法成功製作 –

同意埃米爾Ø n中缺少的東西揭開序幕INITIALISE功能：看看這裏的simple map example

在JavaScript部分的底部是：

google.maps.event.addDomListener(window, 'load', initialize);

這是建立在谷歌地圖API的功能。看看是否添加該行有幫助。

來源

2013-11-03 22:54:32 JasonB

嗨賈森，是奇怪的，但是奇怪的是地圖加載腳本在標準的HTML文件。我只是看了一下這個。我很難理解代碼中的方向，因爲我是一個noob :) – user2932546

我想我一直在使用不正確的API for Maps也https://groups.google.com/forum/#!topic/google-maps-js -api-v3/mmlugLgmSFo我想我正在慢慢地工作:)接下來我需要「理解」的是如果我的代碼基於v2或v3 api :( – user2932546

''是第3版的正確腳本 - 從上面的Google地圖簡單地圖示例複製而來 – JasonB

Bootstrap Row，添加一個Google Map-Canvas

回答

相關問題