problems with google map markers

问题

as you can see at my test.php the marker ist working fine. but when I zoom the map for an better overview the marker is going to north??? If I zoom a lot, the marker moved to North sea :-( Is this a known bug? or am I doing something wrong?

<!DOCTYPE html>
<html>
<head>
<title>MyRange Driving Ranges world wide </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 30px; padding: 0px }
#map_canvas { height: 80% }
</style>
<script type="text/javascript"
  src="https://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.1601369818597, 6.72036588191986);
var myOptions = {
  zoom: 16,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var image = 'images/flag_red_big.png';

var myLatLng = new google.maps.LatLng(51.1601369818597, 6.72036588191986);
var golfMarker = new google.maps.Marker({ position: myLatLng, map: map, icon: image });

}
</script>
</head>
<body onload="initialize()">
<div align="center" id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

回答1:

The default anchor point for an icon (which is what you get if you don't define it) is at the bottom center of the image.

You need to fully specify the icon using an instance of MarkerImage.

FYI - your icon seems to move because there is a lot of empty space between the bottom of the flag and the bottom of the image (which is where it is currently anchored).

来源：https://stackoverflow.com/questions/11970259/problems-with-google-map-markers

标签

google-maps

google-maps-api-3

google-maps-markers