API Google Maps: positionnement, comportement bizarre et comment désactiver certaines fonctionnalités

Question

J'ai travaillé sur la création de cette carte pour un client, mais je me sens un peu dépassé. Jusqu'à présent, j'ai réussi à utiliser modx pour créer dynamiquement une liste de marqueurs pour la carte, créer une icône personnalisée qui fonctionne avec succès et je l'ai stylisée comme je l'aimerais. Cependant, je cherche un peu d'aide à propos de ce qui suit:

L'icône personnalisée ne pointe pas exactement où je le souhaite. Je suppose que la variable iconAnchor est ce qui contrôle cela. Est-ce exact? Est-ce que ses valeurs sont juste coordonnées par rapport à l'icône? Je voudrais également savoir où mon positionnement infowindow est également contrôlé.

Lorsque je clique sur un emplacement dans la liste, la carte est centrée sur cet emplacement, mais par conséquent, mon infowindow dépasse le bas de la carte. Y a-t-il un moyen de faire apparaître l'icône du marqueur dans le quadrant supérieur gauche de la carte? Mon infowindow aura éventuellement une liste d'environ 10-15 images avec du texte à côté d'eux, et je voudrais que la fenêtre d'information pour faire défiler. J'ai ce travail, mais quand je clique et déplace la barre de défilement vers le bas, dès que je lâche la souris, il arrête de défiler mais tient la carte - par conséquent, après le défilement, la carte se déplace avec le Souris. Une idée de ce qui cause ça?

Ma dernière préoccupation est de savoir comment la carte saute d'un point à l'autre après le chargement. Il montre chaque emplacement pour un moment, puis saute à l'autre. Est-il possible de supprimer cette fonctionnalité et de définir une zone de carte de début qui affichera tous mes marqueurs?

Merci pour tous les conseils.

Code Mon a été adapté à partir de: http://www.erikwhite.net/gmapjquery.html

Voici mon code actuel:

 





      $(document).ready(function(){ 
       var defaultLat = 50.5; 
       var defaultLon = -1.4; 




//code to enable a customer marker on the map 
var icon = new GIcon(); 
icon.image = '/img/icon.png'; 
icon.iconSize = new GSize (45, 48); 
icon.iconAnchor = new GPoint (8, 42); 
icon.infoWindowAnchor = new GPoint (43, 6); 

//var markers = new GMarker(getLatLng();, icon); 



       var markers = new Array(); 

    markers[0] = new Array(new GMarker(new GLatLng(LAT, LNG), icon), "TITLE", "title, blurb and a set of images paired with a line of text"); 


       var map = new google.maps.Map2($("#map").get(0));//Initialise google maps 
       map.setCenter(new GLatLng(defaultLat, defaultLon), 15);//Set location to the default and zoom level 
       map.disableDoubleClickZoom();//Disable zooming 




       $.each(markers,function(i,marker){ 
        var delayTime = ((i * 300)/(0.5 * markers.length));//Delay time decreases as number of markers increases 

        setTimeout(function(){ 
         map.addOverlay(marker[0]); 
         $("") 
          .html(markers[i][1])//Use list item label from array 
          .click(function(){ 
           displayPoint(marker[0], i); 
           setActive(this);//Show active state 
          }) 
          .appendTo("#list"); 

         GEvent.addListener(marker[0], "click", function(){ 
          displayPoint(marker[0], i); 
          setActive(i);//Show active location 
         }); 

         displayPoint(marker[0], i); 
         setActive(i);//Show active location 
         if (i == (markers.length - 1)) {//If last item in array 
          setTimeout(function(){//Remove active class and fade marker after delay 
           $("#map_message").fadeOut(); 
           //setActive(); 
          }, 3500); 
         } 
        }, delayTime); 
       }); 

       $("#list").css("opacity","0.2").animate({opacity: 1}, 1100);//Fade in menu 
       $("#map_message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE)); 

       function displayPoint(marker, index){ 
        if ($('#map_message').is(':hidden')) {//Allow toggling of markers 
         $('#map_message').fadeIn(); 
        } 
        else{//Remove all .active classes and hide markers 
         $('#map_message').hide(); 
         $(".active").removeClass(); 
        } 
        //$("#map_message").hide();//Default behaviour, doesn't allow toggling 

        var moveEnd = GEvent.addListener(map, "moveend", function(){ 
         var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng()); 
         $("#map_message") 
          .html(markers[index][2])//Use information from array 
          .fadeIn() 
          .css({ top:markerOffset.y, left:markerOffset.x }); 
        GEvent.removeListener(moveEnd); 
        }); 
        map.panTo(marker.getLatLng()); 
       } 

       function setActive(el){ 
        $(".active").removeClass();//Remove all .active classes 
        $("#list").find('li').eq(el).addClass('active');//Find list element equal to index number and set active 
        $(el).addClass('active');//Set active if list element clicked directly 
       } 
      }); //End onReady 

 

<div id="map" style="width: 500px; height: 350px; border: 1px solid #777; ">map</div> 
<div id="list"></div> 
<div id="map_message"></div> 


#map { float:left; margin-left: 180px; width:500px; height:350px; } 
#map_message { position:absolute; padding:10px; background:#5dbb46; color:#fff; width:200px; height:180px; overflow:auto; } 
#list { float:left; width:150px; background:#acacad; color:#fff; list-style:none; padding:0; } 
#list li { padding:8px; } 
#list li:hover { background:#bdbdbe; color:#fff; cursor:pointer; cursor:hand; } 

Answer 1

1) L'icône personnalisée ne pointe pas exactement où je voudrais que ce. Essayez d'utiliser la classe MarkerImage pour définir la position de l'icône.

function setMarkers(map) { 
    // Add markers to the map 

    // Marker sizes are expressed as a Size of X,Y 
    // where the origin of the image (0,0) is located 
    // in the top left of the image. 

    // Origins, anchor positions and coordinates of the marker 
    // increase in the X direction to the right and in 
    // the Y direction down. 

    var image = new google.maps.MarkerImage('../images/myimage.png', 
     // This marker is 25 pixels wide by 25 pixels tall. 
     new google.maps.Size(25, 25), 
     // The origin for this image is 0,0. 
     new google.maps.Point(0,0), 
     // The anchor for this image is the center at 12, 13. 
     new google.maps.Point(12, 13)); 

    latlng = new google.maps.LatLng(lat, lng); 
    var marker = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
    icon: image 
    }); 
} 

2) Lorsque je clique sur un emplacement sur la liste, les centres de carte à cet endroit, mais en conséquence, mon infowindow va au-delà du bas de la carte. Y a-t-il un moyen de faire apparaître l'icône du marqueur dans le quadrant supérieur gauche de la carte? Je ne suis pas tout à fait sûr de ce que vous entendez par là, mais le centre de la carte ne doit pas être la même latitude et longitude que votre icône de marqueur. Vous pouvez également faire pour plusieurs cartes/marqueurs.

Ou je ne reçois peut-être pas votre question.

3) Je n'ai pas beaucoup d'expérience avec les infowindows de défilement, alors peut-être que quelqu'un d'autre peut répondre à cette question.

4) Ma dernière préoccupation est de savoir comment la carte saute d'un point à l'autre après le chargement. Il montre chaque emplacement pour un moment, puis saute à l'autre. Est-il possible de supprimer cette fonctionnalité et de définir une zone de carte de début qui affichera tous mes marqueurs?

Il est en fait plus facile d'afficher tous les marqueurs au début.Ma suggestion est de réécrire votre code suivant http://code.google.com/apis/maps/documentation/javascript/overlays.html#ComplexIcons, et à partir de l'exemple d'application que vous avez suivi garder et adapter la fonction "displayPoint" pour l'effet de défilement lorsque les liens latéraux sont cliqués, ce qui définirait un centre différent et ouvrir l'infowindow pour l'emplacement. La raison pour laquelle votre carte "saute" est que le code parcourt chaque marqueur et appelle "displayPoint" pour chacun d'entre eux lors du chargement.