Маркер Google Map Не находится в центре

Question

Я внедряю API карт Google и показываю карту в диалоговом окне jQuery. Карта показывает штраф, но позиция маркера не в центре, так что пожалуйста, направляйте меня.

Как я могу сделать положение маркера и карту в центре?

Код для карты:

var myCenter = new google.maps.LatLng('@Model.Latitude', '@Model.Longitude'); 

function initialize() { 
    var mapProp = { 
     center: myCenter, 
     zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
    var marker = new google.maps.Marker({ 
     position: myCenter, 
     draggable: false, 
     animation: google.maps.Animation.DROP, 
    }); 

    marker.setMap(map); 
} 

Код открытия диалогового окна:

$("#googleMap").dialog({ 
    autoOpen: false, 
    height: 600, 
    width: 1000, 
    resizeStop: function (event, ui) { 
    google.maps.event.trigger(googleMap, 'resize') 
}, open: function (event, ui) { 
    google.maps.event.trigger(googleMap, 'resize'); }, 
}); 

$("#btnLocation").click(function() { 
    $("#googleMap").dialog("open"); 
}); 

HTML:

<div id="googleMap" style="width: 1000px; height: 500px"></div> 
<img src="map.jpg" alt="Set Location" id="btnLocation" style="cursor: pointer; height: 35px; width: 35px;" /> 

Answer 1

Попробуйте следующее :

1) Определить map и marker вне функции initialize, мы будем называть их позже, чтобы центрировать карту

var myCenter = new google.maps.LatLng('@Model.Latitude', '@Model.Longitude'); 

// DEFINE YOUR MAP AND MARKER 
var map = null, marker = null; 

function initialize() { 
    var mapProp = { 
     center: myCenter, 
     zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
    marker = new google.maps.Marker({ 
     position: myCenter, 
     draggable: false, 
     animation: google.maps.Animation.DROP, 
    }); 

    marker.setMap(map); 
} 

2) Изменить «открытое» событие диалогового окна, чтобы заставить центр карты при открытии диалогового окна:

$("#googleMap").dialog({ 
    autoOpen: false, 
    height: 600, 
    width: 1000, 
    resizeStop: function (event, ui) { 
     google.maps.event.trigger(googleMap, 'resize') 
    }, 
    // OPEN EVENT MODIFIED ! 
    open: function (event, ui) { 
     google.maps.event.trigger(googleMap, 'resize'); 

     // Force the center of the map 
     map.setCenter(marker.getPosition()); 
    }, 
}); 

У попробовать и дайте мне знать, если это работает;)

Answer 2

You необходимо установить центр карты в положение координаты, которую вы только что нажали.

Сделайте это, добавив следующий код в обработчик событий щелчка.

map.setCenter('MARKER'.getPosition()); 

Это должно быть добавлено к EventListener так:

google.maps.event.addListener(marker, 'click', function() { 
    map.setCenter(marker.getPosition()); 
}); 

для полного примера рассмотрим на Google Maps API:

https://developers.google.com/maps/documentation/javascript/examples/event-simple