2013-04-22 48 views
0

我從Google地方API中提取信息我希望能夠顯示我在一張地圖上添加的所有座標值。在頁面上有多個地圖(如下所示)。有沒有人有什麼建議?我如何獲得谷歌地圖上的多個座標靜態API?

預先感謝您!

<%@c.each do |p|%> 
<ul> 
    <li><%= image_tag("http://maps.googleapis.com/maps/api/staticmap?center=#{p.lat},#{p.lng}&zoom=15&size=600x300&maptype=roadmap 
    &markers=color:blue%7Clabel:S%7C#{p.lat},#{p.lng}&sensor=true")%></li> 
    <li><%=p.name%></li> 
    <li><%=p.rating%></li> 
    <li><%p.lat%></li> 
    <li><%p.lng%></li> 
</ul> 
<%end%> 

回答

0

如果我理解你正確地基本上你需要多ul標籤相互對齊。

基本上你需要給你的ul元素一個固定的寬度並應用一個浮點數。在這裏,我假設你想要三張地圖並排放置。

它的CSS代碼:

* { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
} 
ul { 
    list-style: none; 
    width: 30%; 
    float: left; 
    margin: 0; 
    padding:1.5%; 
} 
ul img { 
    max-width:100%; 
} 

或者如果你喜歡SCSS:

* { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
} 
ul { 
    list-style: none; 
    width: 30%; 
    float: left; 
    margin: 0; 
    padding:1.5%; 
    li { 
     img { 
      max-width:100%; 
     } 
    } 
} 

如果你想看看如何做到這一點看,檢查出來的http://jsfiddle.net/dheer/Ltxzj/2/

注意:如果您將此添加到您的導軌應用程序,您可能需要指定一個新的類作爲當前代碼的樣式可能會影響其他設計元素。

0

Martin Bean在此主題中提供了一個答案: How do I show multiple locations in Google Maps? 它使用google maps javascript api。正如在這個例子中所看到的那樣,您應該從座標中將Markers添加到地圖中(在這種情況下,他使用了應該從模型中加載的一堆座標)。