Google Maps API: positioning, some weird behavior and how to disable a couple of features

Question

I've been working on creating this map for a client, but I feel a little bit in over my head. So far, I've managed to use modx to dynamically create a list of markers for the map, created a custom icon that works successfully and I've got it styled as I'd like it. However, I'm looking for a bit of help about the following:

The custom icon doesn't point exactly where I'd like it to. I assume that the iconAnchor variable is what controls this. Is that correct? Are it's values just x/y coordinated of the icon? I would also like to know where my infowindow positioning is controlled as well.

When I click on a location on the list, the map centers on that location, but as a result, my infowindow goes beyond the bottom of the map. Is there a way that I can make the marker icon appear in the top left quadrant of the map?

My infowindow will eventually have a list of about 10-15 images with text next to them, and I would like the info window to scroll. I've got this working, but when I click and move the scroll bar down, as soon as I let off the mouse, it stops scrolling but then is holding the map -- as a result, after scrolling, the map moves with the mouse. Any idea as to what's causing this?

My last concern is how the map jumps from point to point after loading. It shows each location for just a moment, then jumps to the next. Is it possible to remove this functionality and set a beginning map area that will display all of my markers?

Thanks for any and all advice.

My code was adapted from: http://www.erikwhite.net/gmapjquery.html

Here's my current code:

            $(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) The custom icon doesn't point exactly where I'd like it to.

Try using the MarkerImage class to set the position for the icon.

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) When I click on a location on the list, the map centers on that location, but as a result, my infowindow goes beyond the bottom of the map. Is there a way that I can make the marker icon appear in the top left quadrant of the map?

I'm not entirely sure on what you mean by this, but the map center doesn't have to be the same latitude and longitude as your marker icon. You can also do for multiple maps/markers.

Or I may not be getting your question.

3) I don't have much experience with scrolling infowindows, so maybe someone else can answer that.

4) My last concern is how the map jumps from point to point after loading. It shows each location for just a moment, then jumps to the next. Is it possible to remove this functionality and set a beginning map area that will display all of my markers?

It is actually easier to display all the markers at the onset. My suggestion is to rewrite your code following http://code.google.com/apis/maps/documentation/javascript/overlays.html#ComplexIcons, and from the example app you followed keep and adapt the "displayPoint" function for the scrolling effect when the side links are clicked, which would set a different center and open the infowindow for the location.

The reason why your map "jumps" is because the code iterates through every marker and calls "displayPoint" for each one when loading.