Swindle
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.getElementBy Id("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>
<script type="text/javascript">
// Create the marker and corresponding information window
function createInfoMarker(point, address) {
var marker = new GMarker(point);
GEvent.addListener(marker,
function() {
marker.openInfoWindowHtml(
}
);
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,
function() {
marker.openInfoWindowHtml(
}
);
return marker;
}
var map = new GMap(document.getElementBy
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER