当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Google Map v3 API not centered and doesn't have a marker

问题描述:

The modal popup map on my page here (when clicked on the small map) isn't centered as it's too far to the right, and the marker isn't showing. If someone could help diagnose that would be great:

<script src="http://maps.googleapis.com/maps/api/js?q=London&key=xxxxxxxxxxxxxxxxxx&sensor=false"></script>

<script>

var map;

function initialize() {

var mapOptions = {

zoom: 15,

center: new google.maps.LatLng(-34.397, 150.644),

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var geolocate = function(address, callback) {

$.ajax({

url: "http://maps.googleapis.com/maps/api/geocode/json",

data: {

"sensor": true,

"address": address

},

dataType: "json",

success: function(d) {

if (d.status == "ZERO_RESULTS") callback(false);

if (d.results && d.results[0] && d.results[0].geometry) {

callback({

"ne": d.results[0].geometry.bounds.northeast,

"sw": d.results[0].geometry.bounds.southwest,

"center": d.results[0].geometry.location

});

}

else callback(false);

}

});

};

map = new google.maps.Map(document.getElementById('map-canvas'),

mapOptions);

geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) {

map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));

});

}

google.maps.event.addDomListener(window, 'load', initialize);

$('#myModal').on('shown', function () {

google.maps.event.trigger(map, 'resize');

})

Many thanks

网友答案:

There is no marker because you don't create one. You should put a marker on your map (and assign a listener if you want to display an infowindow if you click it. In that case you have to create an infowinfow too). After you do that you have to center your map after resize trigger.

Try this code

<script src="http://maps.googleapis.com/maps/api/js?q=London&key=xxxxxxxxxxxxxxxxxx&sensor=false"></script>
<script>
    var map;
    var marker = null;

    function initialize() {
      var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var geolocate = function(address, callback) {
            $.ajax({
                    url: "http://maps.googleapis.com/maps/api/geocode/json",
                    data: {
                        "sensor": true,
                        "address": address
                    },
                    dataType: "json",
                    success: function(d) {
                        if (d.status == "ZERO_RESULTS") callback(false);
                        if (d.results && d.results[0] && d.results[0].geometry) {
                            callback({
                                "ne": d.results[0].geometry.bounds.northeast,
                                "sw": d.results[0].geometry.bounds.southwest,
                                "center": d.results[0].geometry.location
                            });
                        }
                        else callback(false);
                    }
                });
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
      geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) {

            if(marker == null) {
                   marker = new google.maps.Marker({
                       map: map,
                       clickable: false //remove if you want it clickable
                     });
               }
                 marker.setPosition(new google.maps.LatLng(c.center.lat, c.center.lng));
     });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

$('#myModal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(marker.getPosition()); //Center on your marker or replace it if you want to center it elsewhere
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: