Grid selected location on map

Using Nominatim to geocode locations and show the on the igMap

by damyanpetev

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.dv.js"></script>
<link href="http://cdn-na.infragistics.com/jquery/20141/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
    <p> ${item.Customer} </p>
    <p> ${item.display_name} </p>
</script>
<div id="grid"></div>
<div id="map"></div>

JavaScript

$(function () {

    var data = [{
        Name: "Warsaw",
        Country: "Poland",
        Customer: "John Doe"
    }, {
        Name: "London",
        Country: "England",
        Customer: "Flora Mckenzie"
    }, {
        Name: "Berlin",
        Country: "Germany",
        Customer: "Rena Pennington"
    }, {
        Name: "Los Angeles",
        Country: "United States",
        Customer: "John Doe"
    }, {
        Name: "Sofia",
        Country: "Bulgaria",
        Customer: "Linda Clark"
    }];

    $("#grid").igGrid({
        dataSource: data,
        features: [{
            name: 'Selection',
            mode: 'row',
            multipleSelection: false,
            rowSelectionChanged: function (ui, args) {
                
                //keep track of selected customer
                selected = args.row.element[0].cells[2].textContent; 
                
                var locationQuery = "http://nominatim.openstreetmap.org/search?format=json&limit=3&q=" + args.row.element[0].cells[0].textContent + "," + args.row.element[0].cells[1].textContent;
                
                $.getJSON(locationQuery, function (json, text) {
                    //if(json[0].type == "city")
                    json[0].Customer = selected;
                    
                    // add marker and zoom in to location
                    $("#map").igMap("addItem", json[0] , "cities" )
                      .igMap("zoomToGeographic", {
                        left: json[0].lon - 2,
                        top: json[0].lat - 2,
                        width: 4,
                        height: 4
                    });
                });
            }
        }]
    });

    $("#map").igMap({
        width: "700px",
        height: "500px",
        windowRect: {
            left: 0.225,
            top: 0.1,
            height: 0.6,
            width: 0.6
        },
        series: [{
            type: "geographicSymbol",
            name: "cities",    
           ...