Problem with my click event on GoogleMaps integration - Pulling data from a JSON file

I have GoogleMaps integrated into my site. I'm having a problem pulling my info from my JSON file into the Info Window when the markers are clicked.

Below is my current code:

/*********** Custom GoogleMaps functions ***********/

if (document.getElementById("events-map")) {

    // set json path
    var markerFile = '/scripts/json/find-events.json';

    // set default map properties
    var defaultLatlng = new google.maps.LatLng(41.4925, -99.9018);

    // zoom level of the map        
    var defaultZoom = 4;

    // variable for map
    var map;

    // variable for marker info window
    var infowindow;

    // List with all marker to check if exist
    var markerList = {};

    // option for google map object
    var myOptions = {
    开发者_运维知识库    zoom: defaultZoom,
        center: defaultLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }


    /**
     * Load Map
     */
    function loadMap() {

        // create new map make sure a DIV with id myMap exist on page
        map = new google.maps.Map(document.getElementById("events-map"), myOptions);

        // create new info window for marker detail pop-up
        infowindow = new google.maps.InfoWindow();

        // load markers
        loadMarkers();
    }


    /**
     * Load markers via ajax request from server
     */
    function loadMarkers() {

        // load marker jSon data        
        $.getJSON(markerFile, function(data) {

            // loop all the markers
            $.each(data, function(i, item) {

                // add marker to map
                loadMarker(item);

            });
        });
    }

    /**
     * Load marker to map
     */
    function loadMarker(makerData) {

        // create new marker location
        var myLatlng = new google.maps.LatLng(markerData['xCoordinate'], markerData['yCoordinate']);

        // create new marker                
        var marker = new google.maps.Marker({
            id: markerData['id'],
            map: map,
            title: markerData['propertyName'] ,
            position: myLatlng

        });

        // add marker to list used later to get content and additional marker information
        markerList[marker.id] = marker;

        // add event listener when marker is clicked
        // currently the marker data contain a dataurl field this can of course be done different
        google.maps.event.addListener(marker, 'click', function() {

            // show marker when clicked
            showMarker(marker.id);

        });

        // add event when marker window is closed to reset map location
        google.maps.event.addListener(infowindow, 'closeclick', function() {
            map.setCenter(defaultLatlng);
            map.setZoom(defaultZoom);
        });
    }

    /**
     * Show marker info window
     */
    function showMarker(markerId) {

        // get marker information from marker list
        var marker = markerList[markerId];

        // check if marker was found
        if (marker) {
            // get marker detail information from server
            $.getJSON(markerFile, function(data) {
                // show marker window
                infowindow.setContent(data);
                infowindow.open(map, marker);
            });
        } else {
            alert('Error marker not found: ' + markerId);
        }
    }


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

And here is the info that is contained in my JSON file:

{
"markers":[
    {

        "id":"1",
        "xCoordinate" : 34.048928,
        "yCoordinate" : -111.093731,
        "propertyName" : "Arizona",
        "propertyState" : "AZ",
        "propertyPhone" : "777.777.7777",
        "propertyEmail" : "test@example.com"
    },
    {
        "id":"2",
        "xCoordinate" : 38.582526,
        "yCoordinate" : -92.510376,
        "propertyName" : "Missouri",
        "propertyState" : "MO",
        "propertyPhone" : "777.777.7777",
        "propertyEmail" : "test@example.com"
    }
]
}

In

var marker = ...
$.getJSON(markerFile, function(data) {...marker...}

the function(data) is the callback that is called asynchronously when the result of the respective AJAX call is returned. At that moment the local variable marker is no longer in scope. You should apply a closure over the marker:

$.getJSON(markerFile, function(mapMarker) {
    var m = mapMarker; // save the current marker in the closure
    return function(data) {  // return the required callback ...
        // show marker window
        infowindow.setContent(data);
        infowindow.open(map, m);
    } (marker)               // ... applied to marker
});

There is a typo in your loadMarker function:

makerData should be markerData