JSON & List Address for GMAP3 plotting

JSON & List Address for GMAP3 plotting

HTML

<script src="http://www.mindboxdesigns.com/test-scripts/gmap3.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<ul id="adds">
    <li>Львов</li>
       <li>Львов</li>

</ul>

<div id="addies"> </div>
      <div id="map"></div>
<h1>Parse JSON data using jQuery.getJSON()</h1>
    <hr/>
    <table border="1">
        <tr>
            <td>Url:</td>
            <td><a class="myLink">The Google Geocoding API</a> 
            </td>
        </tr>
        <tr>
            <td>Address:</td>
            <td id="address"></td>
        </tr>
        <tr>
            <td>Latitude:</td>
            <td id="latitude"></td>
        </tr>
        <tr>
            <td>Latitude:</td>
            <td id="longitude"></td>
        </tr>
    </table>

CSS

body {
    font-size: 75%;
    font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
    margin-top:35px;
}
#body td {
    padding:15px 30px 15px 10px;
}
#body tr td:nth-child(1) {
    font-weight:bold;
}
#address {
    width:400px;
}


#map{
        margin: 20px;
        border: 1px dashed #C0C0C0;
        width: 350px;
        height: 250px;
        position:relative;
        float:right;
      }

JavaScript

// The Google Geocoding API url used to get the JSON data
var geocodingAPI = "http://maps.googleapis.com/maps/api/geocode/json?address="+$("#adds li:eq(0)").text()+ "&sensor=true";

$.getJSON(geocodingAPI, function (json) {

    // Set the variables from the results array
    var address = json.results[0].formatted_address;
    console.log('Address : ', address);
    
    var latitude = json.results[0].geometry.location.lat;
    console.log('Latitude : ', latitude);
    
    var longitude = json.results[0].geometry.location.lng;
    console.log('Longitude : ', longitude);

    // Set the table td text
    $('#address').text(address);
    $('#latitude').text(latitude);
    $('#longitude').text(longitude);
});

// Caching the link jquery object
var $myLink = $('a.myLink');

// Set the links properties
$myLink.prop({
    href: geocodingAPI,
    title: 'Click on this link to open in a new window.'
}).click(function (e) {
    e.preventDefault();
    window.open(this.href, '_blank');
});



$("#adds li").each(function(){
    var a = $(this).text()
    getAddress(a)
});

function getAddress(a){
jQuery.ajax({
    type: "GET",
    dataType: "json",
    url: "http://maps.googleapis.com/maps/api/geocode/json",
    data: {'address': a,'sensor':false},
    success: function(data){
        if(data.results.length){
            $('#addies').append(data.results[0].geometry.location.lat +"     _   "+data.results[0].geometry.location.lng+"<br>");
            
                 var markers=[];
     var marker = new Object();
        marker.lat = data.results[0].geometry.location.lat;
        marker.lng = data.results[0].geometry.location.lng;
        marker.options = new Object();
        marker.options.icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/marker.png");
        markers.push(marker);
            plotmap(markers)
        }else{
            
        $('#addies').append('invalid address');
       }
    }
});

}


function plotmap(m){
    $("#map").gmap3({
 ...