Visualizzazione dei risultati da 1 a 6 su 6

Discussione: Modificare infowindows

  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2011
    Messaggi
    219

    Modificare infowindows

    ciao a tutti,
    spero di aver azzeccato la sezione

    io ho questo file html
    codice HTML:
    <!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>

    vorrei poter personalizzare il infowindows della mappa ma non so proprio da dove partire
    mi potreste dare qualche dritta ?

    grazie in anticipo
    SO: win 10
    Antivirus: Kaspersky Internet Security
    Homepage www.aeki.biz

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Impossibile decifralo con quella formattazione, comunque leggendo qui dovresti risolvere
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2011
    Messaggi
    219
    grazie della risposta,
    avevo visto quell'esempio ma, non sapendo gran che di codici non ci avevo capito gran chè...sopratutto non avevo capito come adattarlo al mio codice

    per quanto riguarda la formattazione intendi il mio codice html provo a ri postarlo

    codice HTML:
    <!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>
    se non ho fatto errori, così dovrebbe essere più comprensibile
    per me è arabo ma per voi dovrebbe essere più chiaro

    questo codice è un mix di aiuti vari e modifiche trovate quà e la

    grazie

    ciao
    SO: win 10
    Antivirus: Kaspersky Internet Security
    Homepage www.aeki.biz

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2011
    Messaggi
    219
    niente più ?
    SO: win 10
    Antivirus: Kaspersky Internet Security
    Homepage www.aeki.biz

  5. #5
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Quote Originariamente inviata da gobas Visualizza il messaggio
    niente più ?
    Non è semplice, e dubito che qualcuno si faccia carico del tuo problema.
    Le soluzioni o ti studi le api di google oppure rinunci
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  6. #6
    Utente di HTML.it
    Registrato dal
    Jan 2011
    Messaggi
    219
    ok...spero che appaia un buon samaritano ma capisco che possa essere una rottura

    grazie
    SO: win 10
    Antivirus: Kaspersky Internet Security
    Homepage www.aeki.biz

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.