Link to home
Start Free TrialLog in
Avatar of Swindle
SwindleFlag for United States of America

asked on

Google Maps API - Custom Icon keeps moving West as you zoom out.

I am using the following function to draw the custom icon on my map.  I had to change the values in the CreateBusmarker function for the icon.IconSize and icon.IconAnchor properties to get it to look correct and to be placed at the exact correct point.  The problem is, that I set those values based on where the icon was showing when I was zoomed ALL the way in on the map.  The further you zoom out, the further west the icon gets placed.  It moves so much that when you zoom out to the entire U.S. it doesn't even look like it's in the right state anymore.  If I shrink the icon down and use icon.iconSize = new GSize(12,20) and icon.iconAnchor = new  GPoint(6,20) it works perfectly but the icon is WAY too small.  I have pasted what I think is the relevant code below.  If I omitted anything you need to see, just let me know and I'll post the whole thing if I have to.  Anyone have any suggestions?


         <script type="text/javascript">

            // Create the marker and corresponding information window
            function createInfoMarker(point, address) {
               var marker = new GMarker(point);
               GEvent.addListener(marker, "click",
                  function() {
                     marker.openInfoWindowHtml(address);
                  }
               );
               return marker;
            }


            // Create the Bus marker with a custom icon and information window
          function createBusMarker(point, address) {
               var marker = new GMarker(point);
               // Create the custom icon
               var icon = new GIcon();
               icon.image = "http://www.homelessalliance.org/TranspoLocator/markers/hnetbus1.png";
               icon.shadow = "http://www.homelessalliance.org/TranspoLocator/markers/hnetbus1_shadowD.png";
               icon.iconSize = new GSize(40, 40);
               icon.shadowSize = new GSize(50, 40);
               icon.iconAnchor = new GPoint(32, 40);
               icon.infoWindowAnchor = new GPoint(5, 1);
               var marker = new GMarker(point, icon);
               GEvent.addListener(marker, "click",
                  function() {
                     marker.openInfoWindowHtml(address);
                  }
               );
               return marker;
            }

            var map = new GMap(document.getElementById("map"));
            map.centerAndZoom(new GPoint(<%=szLong%>, <%=szLat%>), 5);
            //HNET Express Current Location
          var point = new GPoint(<%=szLong%>, <%=szLat%>);
          address = "HNET Express";
          var marker = createBusMarker(point, address);
          map.addOverlay(marker);
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
         </script>
Avatar of Swindle
Swindle
Flag of United States of America image

ASKER

I'm still having this problem.  If anyone has any suggestions at all I would love to hear it.  
ASKER CERTIFIED SOLUTION
Avatar of Dennis Maeder
Dennis Maeder
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial