Google Map Marker Is not in center

google-maps-api-3, jquery, jquery-ui

Solution

Try the following:

1) Define `map` and `marker` outside the function `initialize`, we'll call these later to center the map

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) Modify the "open" event of the dialog box to force the map center when opening the dialog box:

$("#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());
    }, 
});

Have a try and let me know if this works ;)

Problem

I am implementing Google Map API and I show the map in jQuery Dialog Box. The Map is showing fine but the marker position in not in center, SO please guide me. How can I make the marker position and map in center? Code for the map: ``` 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); } ``` Code opening the dialog box: ``` $("#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;" /> ```

Original source