自定义infowindows地图的尺寸

时间:2014-01-18 11:05:59

标签: javascript css google-maps

我想更改infowindows地图以确保尺寸根据内容自动调节,以避免滚动条。

我无法理解如何将例子放在讨论中

我不是专家,你能帮助我吗?

提前致谢

我为我的英语道歉


好的......现在我终于想出了如何插入代码!

代码是这样的:

<!DOCTYPE html>
<html> 
   <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <meta HTTP-EQUIV="EXPIRES" CONTENT="0">
    <title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title>
    <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize()
 {
    geocoder = new google.maps.Geocoder();
        var italia = new google.maps.LatLng(42.147114,13.25964);
        map = new google.maps.Map(document.getElementById('map-canvas'), {
              center: italia,
              zoom: 6,
              mapTypeId: google.maps.MapTypeId.ROADMAP
         });
//------------------- Inizio parte Fusion Layer ------------------------------
         var campminuscolo = idcamping.value
          var camp          = "'"  + campminuscolo   + "'"
         var camp1         = "'Nome' contains ignoring case " +  camp
         var layer = new google.maps.FusionTablesLayer({
             query: {
                    select: 'indirizzo',
                     from:   '1yqLrOoKCcA-ssAgIVf47mVZbub7SppWCSr5z71g',
                    where:  camp1
                                                               },
    //------------------ alcune note -----------------------------------
    // Select - Contiene il nome di un campo del DB fusion
    // From   - Identifica l'id della mappa fusion table
    // camp1  - contiene l'istruzione che permette la ricerca sul nome del campeggio
    //          in questo caso il campo del DB fusion che contiene il nome del campeggio
    //          si chiama "1Nome" (lo vedi appena sopra dove viene impostata la variabile "camp1")
    //-------------------------------------------------------------------

         styles: [{
                       markerOptions: {
            iconName: "grn_circle"
                           },

}]  //----- Chiudi styles

   }); //----- Chiudi layer

          layer.setMap(map);

//------------------- Fine parte Fusion Layer ------------------------------

}  //------- Fine inizialize
//----------------------------------------

function testenter(e) {
     if (e.keyCode == 13) {            // tasto enter
          initialize();
        return false;
                            }
}
//----------------------------------------
//------------------------------------------------------------------------------------------
//   In questa sezione ci sono i dati e le funzioni utilizzate per la search delle localita'
//------------------------------------------------------------------------------------------
var geocoder;
var map;
var markersArray = []
;var marker;
//-------------------------------
function codeAddress() {
    var address = document.getElementById("address").value;
                geocoder.geocode({ 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            clearOverlays();
            document.getElementById("address").value = results[0]['formatted_address'];
            map.setCenter(results[0].geometry.location);
            map.setZoom(8);
            marker = new google.maps.Marker({
                map            : map,
                title        : results[0]['formatted_address'],
                position    : results[0].geometry.location,
                icon        : "arrow.png",
                animation    : google.maps.Animation.DROP
            });
            markersArray.push(marker);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
                }
    });
}
//--------------------------------
function clearOverlays() {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
    }
}
//-------------------------------
function testenter1(e) {
    if (e.keyCode == 13) {
                    codeAddress();
        return false;
            }
}
//-------------------------------------------------------------------------------------------------
//   FINE - In questa sezione ci sono i dati e le funzioni utilizzate per la search delle localita'
//-------------------------------------------------------------------------------------------------       

//-----------------------------------------
</script>

<style>
#avatar-panel {
        position: absolute; bottom: 17px; right: 0px; margin-left: -180px;
        width: 144px; height: 53px; z-index: 1; background-color: trasparent;
        padding: 1px; border: 0px solid #999;
}
</style>


</head>
<body onload="initialize()">

<style type="text/css">
input {
border: 2px solid gray;
background: rgb(243, 243, 243);
width: 150px;
left: 100px;
padding: 4px;
position: absolute;
z-index: 1;
}
</style>

<input type="text"  id="idcamping"  placeholder="Cerca Ristorante "  onKeyPress ="testenter(event)"style="left: 100px;">
   <input type="text"  id="address"    placeholder="Cerca Localita'"  onKeyPress ="testenter1
(event)"style="left: 265px;">
   <div id="map-canvas"></div>
   <div id="avatar-panel">
   <img src="logo mappe.png" width="144" height="53" />
   </div>
</body>
</html>

感谢回复

0 个答案:

没有答案