CODEWITHSUNDEEP
jqueryjquery-uigoogle-maps-api-3
Nikhil Vasdev
Nikhil Vasdev

Reputation: 193

Google Map Marker Is not in center

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;" />

Upvotes: 3

Views: 13725

Answers (2)

Littm
Littm

Reputation: 4947

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 ;)

Upvotes: 9

JuniorCoder
JuniorCoder

Reputation: 342

You have to set the center of the map to the position of the coordinate you have just clicked.

Do this by adding the following code to your click eventhandler.

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

This needs to be added to the eventlistener like this:

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

for full example take a look at the google maps api example:

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

Upvotes: 2

Related Questions