Google Maps Javascript API v3动态标记的位置略有偏离，放大或缩小的效果更糟

Question

I have a map which I am trying to generate dynamic markers for. Here is the relevent code. Any help would be greatly appreciated! also, I removed my key. The markers are all slightly off position and it gets worse when I zoom in or out.

<div id="map-canvas"></div>

<script type="text/javascript"
                    src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE">
            </script>
            <script type="text/javascript">
                function initialize() {
                    var mapOptions = {
                        center: { lat: 38.989260, lng: -77.076198},
                        zoom: 13
                    };
                    var map = new google.maps.Map(document.getElementById('map-canvas'),
                        mapOptions);
load_markers(map);
                }
                google.maps.event.addDomListener(window, 'load', initialize);
            </script>
            <script>
                function load_markers(map){



                    var myLatlng_0 = new google.maps.LatLng(38.898702, -77.15228400000001);
                    // To add the marker to the map, use the 'map' property
                    var marker_0 = new google.maps.Marker({
                        position: myLatlng_0,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_0.setMap(map)

                    var myLatlng_1 = new google.maps.LatLng(38.911023, -77.19537200000002);
                    // To add the marker to the map, use the 'map' property
                    var marker_1 = new google.maps.Marker({
                        position: myLatlng_1,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_1.setMap(map)

                    var myLatlng_2 = new google.maps.LatLng(38.897052, -77.14111500000001);
                    // To add the marker to the map, use the 'map' property
                    var marker_2 = new google.maps.Marker({
                        position: myLatlng_2,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_2.setMap(map)

                    var myLatlng_3 = new google.maps.LatLng(38.8964079, -77.184057);
                    // To add the marker to the map, use the 'map' property
                    var marker_3 = new google.maps.Marker({
                        position: myLatlng_3,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_3.setMap(map)

                    var myLatlng_4 = new google.maps.LatLng(38.8964019, -77.1840694);
                    // To add the marker to the map, use the 'map' property
                    var marker_4 = new google.maps.Marker({
                        position: myLatlng_4,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_4.setMap(map)

                    var myLatlng_5 = new google.maps.LatLng(38.875528, -77.12865699999998);
                    // To add the marker to the map, use the 'map' property
                    var marker_5 = new google.maps.Marker({
                        position: myLatlng_5,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_5.setMap(map)

                    var myLatlng_6 = new google.maps.LatLng(38.89987, -77.26557600000001);
                    // To add the marker to the map, use the 'map' property
                    var marker_6 = new google.maps.Marker({
                        position: myLatlng_6,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_6.setMap(map)

                    var myLatlng_7 = new google.maps.LatLng(38.895214, -77.11174799999998);
                    // To add the marker to the map, use the 'map' property
                    var marker_7 = new google.maps.Marker({
                        position: myLatlng_7,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_7.setMap(map)

                    var myLatlng_8 = new google.maps.LatLng(38.894044, -77.25868100000002);
                    // To add the marker to the map, use the 'map' property
                    var marker_8 = new google.maps.Marker({
                        position: myLatlng_8,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_8.setMap(map)

                    var myLatlng_9 = new google.maps.LatLng(38.89598100000001, -77.18421599999999);
                    // To add the marker to the map, use the 'map' property
                    var marker_9 = new google.maps.Marker({
                        position: myLatlng_9,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_9.setMap(map)

                    var myLatlng_10 = new google.maps.LatLng(38.895918, -77.26371499999999);
                    // To add the marker to the map, use the 'map' property
                    var marker_10 = new google.maps.Marker({
                        position: myLatlng_10,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_10.setMap(map)

                    var myLatlng_11 = new google.maps.LatLng(38.89458, -77.263038);
                    // To add the marker to the map, use the 'map' property
                    var marker_11 = new google.maps.Marker({
                        position: myLatlng_11,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_11.setMap(map)

                    var myLatlng_12 = new google.maps.LatLng(38.896569, -77.16078900000002);
                    // To add the marker to the map, use the 'map' property
                    var marker_12 = new google.maps.Marker({
                        position: myLatlng_12,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_12.setMap(map)

                    var myLatlng_13 = new google.maps.LatLng(38.904719, -77.27201400000001);
                    // To add the marker to the map, use the 'map' property
                    var marker_13 = new google.maps.Marker({
                        position: myLatlng_13,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_13.setMap(map)

                    var myLatlng_14 = new google.maps.LatLng(38.8788259, -77.10319500000003);
                    // To add the marker to the map, use the 'map' property
                    var marker_14 = new google.maps.Marker({
                        position: myLatlng_14,
                        map: map,
                        title: 'click to zoom'
                    });
                    marker_14.setMap(map)
                                    }
            </script>

Can anyone tell me the issue with this code? I have removed the key. The markers are pretty close to the right location but when I zoom they dont stay. It's like they need to re-render or be anchored. Thanks for any help!

Answer 1

Call the function that places the markers.

function initialize() {
    var mapOptions = {
        center: { lat: 38.989260, lng: -77.076198},
        zoom: 13
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    load_markers(map);
}

---

Edit: I'm seeing very weird behavior on your linked demo. Try this:

var mapOptions = {
  ...
  center: new google.maps.LatLng({38.989260, -77.076198}),
  ...
}

edit2: nevermind, the docs say the literal objects are fine here...

Answer 2

This is a pretty old question, but just in case someone else is having the same issue, the problem as I found it was that the coordinates used in the Google Maps URL are that of the centre of the map as it's drawn in that instance, not the coordinates of the address that's been searched .

So if you're using a dynamically created map, these coordinates won't pinpoint an address, instead you'll have to use something like http://www.latlong.net to get the true latitude and longitude.