[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1097
  • Last Modified:

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>
0
Swindle
Asked:
Swindle
1 Solution
 
SwindleAuthor Commented:
I'm still having this problem.  If anyone has any suggestions at all I would love to hear it.  
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now