Mapping Locations in textbox - newline

Mapping Locations in textbox - newline

by Andrew Pougher

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div class="form-group">
    <label for="gps">Locations:</label>

    <textarea class="form-control" rows="5" id="gps">Norwich, UK
        Eau Claire, WI
        Banbury Road, Mundelein, 60060</textarea>
</div>
<button class="btn btn-lg btn-danger">Show Maps</button>
     <div class="container">
	<div class="row" id="touchmaps">
        
        </div>
     </div>

<h4>Statics</h4>
<div class="row" id="maps"></div>
<hr>

CSS

@import url('http://fonts.googleapis.com/css?family=Tenor+Sans');
body{		font: 12px/1.6 'Tenor Sans', sans-serif;-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;color:black}

.mymap {
    min-height:320px;
    max-height:320px;
}

.mapblock{
	height:320px;
	background:#000;
	color:#fff;
}
.contactAddress {
	position: relative;
	padding:28px;
	font-size:14px;
}

.contactAddress a {
	color: white !important;
}

.contactAddress .tel {
	position: absolute;
	bottom: 40px;
}

.text-bold {
	font-weight: bold;
}

.text-normal {
	font-weight: normal;
}

.text-light {
	font-weight: 200;
}

.text-lighten {
	color: #999;
}
.movemap p {

	margin-top: 0px;
	margin-bottom: 20px;

}

JavaScript

$('button').click(function () {
    var addresses = function () {
        var arrayOfLines = $('#gps').val().split('\n'),
            arrayLocation = [];
        $.each(arrayOfLines, function (index, item) {
            var town = item.split(',');
            var xhr = $.ajax({
                url: 'http://maps.googleapis.com/maps/api/geocode/json?address=' + $.trim(town[0]) + '&sensor=false',
                dataType: 'json'
            });
            arrayLocation.push(xhr);
        });

        return $.when.apply($, arrayLocation).then(function () {
            return $.map(arguments, function (args) {
                if (!$.isArray(args[0].results) || args[0].results.length == 0) {
                    return undefined;
                }
                var data = args[0].results[0];
                var location = data.geometry.location;

                var add = data.address_components[0].long_name;
                var lat = location.lat;
                var lng = location.lng;
                var fullLoc = lat + ", " + lng;
// for static maps
                var mapadd = "http://maps.google.com/maps/api/staticmap?size=640x200&zoom=14&maptype=roadmap&markers=size:small|color:green|" + fullLoc + "&sensor=false";
                $("<img class='locationmap img-responsive thumbnail' alt='Andrew'/>").attr("src", mapadd).appendTo($("#maps"));
                //for interative maps
                initialize(lat, lng, add)

                //return "['" + add + "', " + lat + ", " + lng + "]";
                return (lat + ", " + lng);

            });
        });

        return arrayLocation;
    };

    addresses().done(function (arrayLocation) {
        //alert(arrayLocation);
        $(".locationmap").wrap("<div class='col-sm-4'></div>");
    })
});

var i = 0;

function initialize(lt, lng, add) {
    i++;
    var mapBox = "<div class='col-md-4 '><div class='contactAddress mapblock'><p class='text-bold addy'>"+add+"</p><div class='tel'><p>T +44 123 112...