Personnaliser la fenêtre d'information de Google Maps?

Question

Je travaille sur un site Web d'un client, une église locale. J'ai intégré une carte Google à l'aide de la fonction Lien sur la page Cartes. La fenêtre d'information sur la carte comprend des «avis», et l'église est préoccupée par cela. Y at-il un moyen de supprimer cela de la fenêtre d'information? Je ne veux pas supprimer les commentaires eux-mêmes, juste ce lien sur la fenêtre d'information?

Est-ce possible? Existe-t-il d'autres options de personnalisation (en plus de la taille) que l'on peut manipuler via la chaîne de requête?

Answer 1

Je pense avoir trouvé la réponse à ma propre question. La fenêtre d'information elle-même ne peut pas être modifiée, mais en liant à la carte pour l'adresse elle-même plutôt que l'église comme une entité commerciale fait l'affaire. Le lien des directions est toujours là et c'est surtout tout ce qu'ils voulaient.

Answer 2

Il y a presque 2 ans, j'ai créé un custom map avec un contrôle complet sur le contenu de la bulle, en utilisant l'API et une manipulation de code. Cliquez sur le lien ci-dessus pour une démonstration. J'ai nettoyé le code pour cette réponse, bien que pour l'implémenter, vous devez remplacer tout le texte de YOUR__BLANK__HERE par les valeurs appropriées.

Étape 1: Appelez le API gmaps

<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY_HERE" 
     type="text/javascript"> 
</script> 

Étape 2: Dans le corps de votre document, créez un élément avec id "carte". Taille et place avec CSS. Il nécessite une hauteur et une largeur.

<div id="map" class="content"></div> 

Étape 3: Après la div a été défini dans les DOM, il est sûr d'insérer la balise de script suivant:

<script type="text/javascript"> 
//<![CDATA[ 

// Check to see if this browser can run the Google API 
if (GBrowserIsCompatible()) { 

    var gmarkers = []; 
    var htmls = []; 
    var to_htmls = []; 
    var from_htmls = []; 
    var i=0; 

    // A function to create the marker and set up the event window 
    function createMarker(point,name,html) { 
    var marker = new GMarker(point); 

    // The info window version with the "to here" form open 
    to_htmls[i] = html + 
     '<br />Start address:<form action="http://maps.google.com/maps" method="get">' + 
     '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' + 
     '<INPUT value="Get Directions" TYPE="SUBMIT">' + 
     '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
       // "(" + name + ")" + 
     '"/>'; 
    // The inactive version of the direction info 
    html = html + '<br><a href="javascript:tohere('+i+')">Get Directions<'+'/a>'; 

    GEvent.addListener(marker, "click", function() { 
     marker.openInfoWindowHtml(html); 
    }); 
    gmarkers[i] = marker; 
    htmls[i] = html; 
    i++; 
    return marker; 
    } 

    // functions that open the directions forms 
    function tohere(i) { 
    gmarkers[i].openInfoWindowHtml(to_htmls[i]); 
    } 

    // Display the map, with some controls and set the initial location 
    var map = new GMap2(document.getElementById("map")); 
    map.setCenter(new GLatLng(
    YOUR_LATITUDE_HERE, 
    YOUR_LONGITUDE_HERE 
    ), 
    YOUR_ZOOM_LEVEL_HERE // a value of 13 worked for me 
); 

    // Set up one marker with an info window 
    var marker = createMarker(
    new GLatLng(
     YOUR_LATITUDE_HERE, 
     YOUR_LONGITUDE_HERE 
    ), 
    'YOUR_MARKER_NAME_HERE', 
    '<i>YOUR_HTML_HERE<'+'/i>'); 

    /* repeat the process to add more markers 
    map.addOverlay(marker); 
    var marker = createMarker(
    new GLatLng(
     YOUR_LATITUDE_HERE, 
     YOUR_LONGITUDE_HERE 
    ), 
    'YOUR_MARKER_NAME_HERE', 
    '<i>YOUR_HTML_HERE<'+'/i>'); 
    map.addOverlay(marker);*/ 
} 


// display a warning if the browser was not compatible 
else { 
    alert("Sorry, the Google Maps API is not compatible with this browser"); 
} 

// This Javascript is based on code provided by the 
// Blackpool Community Church Javascript Team 
// http://www.commchurch.freeserve.co.uk/ 
// http://www.econym.demon.co.uk/googlemaps/ 

//]]> 
</script> 

En utilisant ce code, la bulle contient le code HTML que vous spécifiez dans YOUR_HTML_HERE plus un lien vers Obtenir les directions, qui (lorsqu'on clique) se transforme en une boîte de texte demandant une adresse de départ. Le résultat de la requête s'ouvre malheureusement dans une nouvelle fenêtre de navigateur (puisque, au moment de la publication originale, l'API n'incluait pas les capacités de direction)