how to show the google map based on the ajax results?

Question

I have a page where i have to show the map and the mysql results based on ajax success results. on success i will get the latitude and longitude. based on that i have to mark the location on the map. AFter that there will be filter for every search. So markers sh ould be global array. How to achieve this function. Also map should b e auto center zoom according to search results.

  function initialize() {
    var latitude = 57.95,
        longitude = 14.65,
        radius = 8000, //how is this set up
        center = new google.maps.LatLng(latitude,longitude),
        bounds = new google.maps.Circle({center: center, radius: radius}).getBounds(),
        mapOptions = {
            center: center,
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    setMarkers(center, radius, map);
}

function setMarkers(center, radius, map) {
    var json = (function () { 
        var json = null; 
        $.ajax({ 
            'async': false, 
            'global': false, 
            'url': "js/hotels.json", 
            'dataType': "json", 
            'success': function (data) {
                 json = data; 
             }
        });
        return json;
    })

Answer 1

Because the ajax request is assync, you will have to set the markers in your success function from your ajax request. Returning the json variable will not work because of this.

You can find how to set a marker in the Google maps documentation, right here: https://developers.google.com/maps/documentation/javascript/examples/marker-simple

To make the map zoom according to the markers, you can use a bounding box. How to do this can be found here: Google Map API v3 — set bounds and center