Mappa in stile GoogleMaps, ma con grafica differente

[Fa-sum]

Avrei necessità di creare una mappa della nostra Italietta su cui porre (in maniera automatica, ponendo i dati su un database di qualsiasi genere), dei segnaposto in corrispondenza di determinate città.
Fin qui potreste indicarmi di utilizzare Google Maps, e non ricevereste obiezioni, tuttavia quello di cui ho bisogno è leggermente diverso, o meglio, leggermente più semplice.
Per prima cosa, vorrei personalizzare a livello grafico la mappa, inserendo semplicemente la sagoma dell'Italia e delle regioni, senza nessun tipo di zoom o altro. Sulla mappa avrei bisogno di porre dei segnaposto anch'essi con una grafica scelta da me, cliccando (o passando) sui quali, si aprirebbe una nuvoletta, un po' come accade in google maps.

Quanto domando al forum non è del codice, bensì qualche indicazione per realizzare quello di cui ho bisogno.
A ben vedere, dopotutto, non dovrebbe essere poi così difficile considerando che basterebbe creare un algoritmo che mettesse in relazione la mappa da me creata con latitudine e longitudine.

Mi appello a voi, sperando che la sezione sia quella adatta, ipotizzando che la competenza in AJAX possa essere utile ai miei fini.

[lnessuno]

è fattibile ma ci diventeresti scemo a creare una roba così, mentre con le api delle google maps puoi fare praticamente tutto ciò che ti serve

[Fa-sum]

Per prima cosa, ti ringrazio per la risposta tanto veloce.
In secondo luogo, qualora con le API di google si potesse realizzare, verrebbe da domandarsi il Come.
Ho infatti letto diversi articoli a riguardo, anche piuttosto avanzati, ma nessuno dei quali riguardante un'eventuale, e sostanziale, modifica grafica della mappa di google, nonchè la possibilità di disabilitare alcune funzioni come lo zoom.

Creando invece qualcosa da zero, ci sarebbe da venir pazzi, ma forse neanche troppo.
Ci sarebbe, in sostanza, da determinare latitudine e longitudine sulla mappa creata da me, e poi collocare la posizione sul database dei singoli segnaposti in relazione all'effettivo posizionamento geografico. Ci sarebbe, dunque, da collegare latitudine e longitudine con X ed Y della mia mappa.

Ad ogni modo, già se potessi modificare in maniera sostanziale la mappa di google, questo sarebbe molto, e basterebbe.

Saluti.

[lnessuno]

puoi abilitare e disabilitare tutto come preferisci, ed è comodissimo anche prendere i vari punti sulle mappe.

questo era uno scriptino che mi ero fatto io per provare le api

http://www.emanueletoscano.it/temp/mappa.htm

per la grafica non so ma guarda qua
http://code.google.com/apis/maps/doc...stom_Map_Types

stessa cosa per zoom eccetera

[Fa-sum]

Credo di aver trovato qualcosa di molto interessante a questo indirizzo:
http://code.google.com/apis/maps/doc...nce.html#GMap2

E per quanto riguarda invece la personalizzazione delle Nuvolette? Come potrei dargli uno stile grafico mio?

Saluti.

[Fa-sum]

Dopo una dura ricerca, ecco due guide fondamentali per personalizzare Google Maps:

Qui potrete capire come modificare completamente l'info-window, ovvero la finestra che si apre al click sul segnaposto:
http://googlemapsapi.blogspot.com/20...wered-css.html

Qui invece, si spiega come modificare la mappa, e sostituirne una propria a quella di default:
http://mapki.com/index.php?title=Add...Own_Custom_Map

Spero le mie ricerche tornino utili a qualcuno.

Saluti.

[slay]

molo utili .. ho fato delle prove ma applicato alla mia pagina non funziona ...

ho integrato il file extinfowindow.js e anche il css ma niente quando mi metto sopra al mrker con il mouse la mappa si sposta verso sx ...

// così non funziona
marker.openExtInfoWindow(map,"gdfgdfgdfgdf gdfgdfgdfg",{beakOffset: 3}); });

//così funziona bene
marker.openInfoWindowHtml(testoHTML); });

qualche idea...

questo è tutto il codcie ...

<script src="extinfowindow.js" type="text/javascript"></script>
     
     <script type="text/javascript">
    //<![CDATA[
function load(){
      var map = new GMap(document.getElementById("map"));
      var point = new GPoint(12.370605,42.228517);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl());
      map.centerAndZoom(point, 8);
    var baseIcon = new GIcon();
      baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      baseIcon.iconSize = new GSize(20, 34);
      baseIcon.shadowSize = new GSize(37, 34);
      baseIcon.iconAnchor = new GPoint(9, 34);
      baseIcon.infoWindowAnchor = new GPoint(9, 2);
      baseIcon.infoShadowAnchor = new GPoint(18, 25);
    
    function createMarker(point, iconname,info) {
        var icon = new GIcon(baseIcon);
        icon.image = iconname.getAttribute("image");
        var marker = new GMarker(point, icon);
        
                //funzione al passaggio del mouse crea nuvoletta ------------------------------------------------------
                GEvent.addListener(marker, "mouseover", function() {   
                //var fullname= info.getAttribute("fullname");   
                //var telefono= info.getAttribute("telefono");   
                //var indirizzo=info.getAttribute("indirizzo");   
                //var url=info.getAttribute("url");   
                
                //creo stringa da visualizzare nella nuvoletta --------------------------------------------------------
                //var testoHTML=fullname+"
"+telefono+"
"+indirizzo+"
 "+url+"
";   
                marker.openExtInfoWindow(map,"gdfgdfgdfgdf gdfgdfgdfg",{beakOffset: 3}); 
                });
                //marker.openInfoWindowHtml(testoHTML);   });
                
                //quando il mouse va fuori sparisce nuvoletta ---------------------------------------------------------
                GEvent.addListener(marker, "mouseout", function() {
                //map.closeInfoWindow(); }); 
                map.closeExtInfoWindow(); 
                });
                
        
        return marker;
      }
    
    
    var request = GXmlHttp.create();
    request.open("GET", "parks.xml", true);
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
            var xmlDoc = request.responseXML;
           
        var points = xmlDoc.documentElement.getElementsByTagName("point");
        var icons = xmlDoc.documentElement.getElementsByTagName("icon");
        var info = xmlDoc.documentElement.getElementsByTagName("info");

            for (var i = 0; i < points.length; i++) {
              var point = new GPoint(parseFloat(points[i].getAttribute("lng")),
                             parseFloat(points[i].getAttribute("lat")));
     
    var marker = createMarker(point, icons[i],info[i]);
    map.addOverlay(marker);
            }
      }
}
request.send(null);

}
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map"  style="width: 800px; height:500px;"></div>
   
  </body>
</html> 

[slay]

quello che vorrei sapere è se openextinfowindow funziona anche con GMap o solo con GMap2 .. se qualcuno lo sa...

[Fa-sum]

Solo con Gmap2, ne sono quasi certo.
Comunque per quanto riguarda le info-window, altre due estensioni sono Ebubble ed Elabel.

Saluti.

[slay]

infatti penso pure io ... qui ho il codice forse ti può servire ... praticamente prende le coordinate e le info da un file xml ... solo che non funziona molto bene nel senso che quando vado sopra con il mouse al marker mi si sposta la mappa .. cmq questo è il codice ..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Irving City Parks</title>
    <link type="text/css" rel="Stylesheet" media="screen" href="simpleExampleWindow.css"/>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAU6cra27VLGdD-sVZVTbgMxTBNDlYHgSZaMoGwMxMHbZQt3p0axTKUFt-fLbIf0PIbgBFfxKm78AO3w"
      type="text/javascript"></script>
      <script src="extinfowindow.js" type="text/javascript"></script>
     
     <script type="text/javascript">
    //<![CDATA[
function load(){
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(42.228517,12.370605), 8);
      //var point = new GPoint(12.370605,42.228517);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl());
      //map.centerAndZoom(point, 8);
    var baseIcon = new GIcon();
      baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      baseIcon.iconSize = new GSize(20, 34);
      baseIcon.shadowSize = new GSize(37, 34);
      baseIcon.iconAnchor = new GPoint(9, 34);
      baseIcon.infoWindowAnchor = new GPoint(9, 2);
      //baseIcon.infoShadowAnchor = new GPoint(18, 25);
    
    function createMarker(point,iconname,info) {
        var icon = new GIcon(baseIcon);
        icon.image = iconname.getAttribute("image");
        var marker = new GMarker(point,icon);
        
                //funzione al passaggio del mouse crea nuvoletta ------------------------------------------------------
                GEvent.addListener(marker, "mouseover", function() {   
                //var fullname= info.getAttribute("fullname");   
                //var telefono= info.getAttribute("telefono");   
                //var indirizzo=info.getAttribute("indirizzo");   
                //var url=info.getAttribute("url");   
                
                //creo stringa da visualizzare nella nuvoletta --------------------------------------------------------
                //var testoHTML=fullname+"
"+telefono+"
"+indirizzo+"
 "+url+"
";   
                marker.openExtInfoWindow(
                map,
                "gdfgdfgdfgdf gdfgdfgdfg",
                {beakOffset: 3}); 
                });
                //marker.openInfoWindowHtml(testoHTML);   });
                
                //quando il mouse va fuori sparisce nuvoletta ---------------------------------------------------------
                GEvent.addListener(marker, "mouseout", function() {
                //map.closeInfoWindow(); }); 
                map.closeExtInfoWindow(); 
                });
                
        
        return marker;
      }
    
    
    var request = GXmlHttp.create();
    request.open("GET", "parks.xml", true);
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
            var xmlDoc = request.responseXML;
           
        var points = xmlDoc.documentElement.getElementsByTagName("point");
        var icons = xmlDoc.documentElement.getElementsByTagName("icon");
        var info = xmlDoc.documentElement.getElementsByTagName("info");

            for (var i = 0; i < points.length; i++) {
              var point = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                             parseFloat(points[i].getAttribute("lng")));
     
    var marker = createMarker(point,icons[i],info[i]);
    map.addOverlay(marker);
            }
      }
}
request.send(null);

}
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map"  style="width: 800px; height:500px;"></div>
   
  </body>
</html> 

questo è il risulato (pietoso ...) http://www.hotelfree.it/api2/mappa2.htm i marker sono tutti personalizzabili tramite il file xml ... :master: