L'exemple suivant montre un simple marqueur (icône standard) sur Google maps pour l'emplacement et lorsque vous cliquez sur l'icône, il ouvre la fenêtre d'informations. Puis-je afficher la fenêtre d'informations ouverte par défaut pour ne pas avoir à cliquer sur l'icône pour l'ouvrir?
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Si vous souhaitez afficher la fenêtre d'informations ouverte par défaut sans cliquer, ajoutez simplement un nouveau code comme ci-dessous:
Votre code:
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Nous avons donc un nouveau code comme celui-ci:
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
Comme vous pouvez le voir, nous ajoutons juste un petit code de ligne avec infowindow.open(map,marker);
Vous pouvez exécuter "ouvrir" directement sur le chargement de la page devrait ouvrir la fenêtre automatiquement, sans un clic.
infowindow.open(map, marker);
Cependant, cela peut ne pas effectuer un panoramique automatique de la carte dans certains cas, laissant le haut de la superposition sur le bord de la carte.
Une façon qui a fonctionné pour moi est de l'envelopper dans un écouteur de l'événement "tilesloaded" sur la carte
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
infowindow.open(map, marker);
});
Le code ci-dessous fonctionne bien pour moi:
Modifiez la latitude, la longitude, le contenu et l'ID de carte (avec votre identifiant de div personnalisé):
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(48.206615,13.487928);
var mapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<p><strong>Bahnhofstraße 32</strong></p><p>Bahnhofstraße 32, 4910 Ried im</p><p>Innkreis, Austria</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Bahnhofstraße 32'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// show map, open infoBox
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Le code ci-dessus fonctionne parfaitement. Cependant, ma carte ne s'est pas déplacée de sorte que la fenêtre d'information était complètement affichée. Au lieu de cela, la punaise est restée au milieu.
Alors, comment ajustez-vous la carte pour que la fenêtre d'informations soit entièrement visible? Lisez ceci: Google Maps: centrage automatique de la carte sur le clic du marqueur
Si vous souhaitez que la punaise reste là où elle se trouve et ne déplace pas la carte, lisez ceci: Google Maps: Comment empêcher InfoWindow de déplacer la carte
J'espère que cela aide les gens à franchir la prochaine étape