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