CODEWITHSUNDEEP
jquerygoogle-mapsoverlay
Spiffster
Spiffster

Reputation: 11

Google Maps V2 to V3 Marker Click Overlay Not Working (JQuery)

I have been working on this one for a while now and I just cannot figure it out. I have google maps code that I am trying to bring into V3 from V2. I have everything working BUT the overlay that replaces the normal infowindow. This line:

$("#infoCallout").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

No longer works in V3. $("#infoCallout") is the hidden div. Right now the overlay just shows up on the top left...

See what I have so far here: http://empulseforum.com/brammoMapV3.php

And working in V2 just fine here: http://brammoforum.com/brammo-owners-map.php

I feel i am missing something easy.

Thanks in advance!

Upvotes: 1

Views: 518

Answers (2)

Sean Mickey
Sean Mickey

Reputation: 7716

First, when I view the new site at your link, the page throws: Uncaught ReferenceError: markerOffset is not defined at line 73, which is (reformatted):

$("#infoCallout").fadeIn('slow').css({
    top:  markerOffset.y + -107,
    left: markerOffset.x - 40 });

It's easy to see that this code will never work without markerOffset, which is not defined because the code on the previous line (line 72) is commented out:

//var markerOffset = map.fromLatLngToDivPixel(markers.getPosition());

So, you have to uncomment the code on line 72 and refactor it to work via the v3 api:

  1. The inner call: markers.getPosition() remains valid in v3; so far so good
  2. The outer call: map.fromLatLngToDivPixel() no longer exists in v3; this and related calls have been moved into the class: google.maps.MapCanvasProjection. The projection is reachable by calling: OverlayView.getProjection().

Bringing it together, I suggest you try changing the code in the displayPoint function to:

function displayPoint( markers, index ) {
    map.panTo( markers.getPosition() );
    $("#infoCallout").hide();
    updateMemberInfo( pic[index], dN[index], bID[index], cS[index] );

    // Next 2 lines are new and replace the old line of code:
    var prjctn = overlay.getProjection();        
    var markerOffset = prjctn.fromLatLngToDivPixel( markers.getPosition() );

    $( "#infoCallout" ).fadeIn( 'slow' ).css({
        top:  markerOffset.y + -107,
        left: markerOffset.x -40
    });
}

Obviously, this code is untested, so you may have some debugging to do, but I hope this code will get you going in the right direction.

Upvotes: 1

Chris Broadfoot
Chris Broadfoot

Reputation: 5112

Use OverlayView's fromLatLngToContainerPixel method.

Upvotes: 0

Related Questions