Testing a Map Plugin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css">
 
<script     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkTVHvbeiXIF1I_XLVfomQC5PsMHNWk0Y&sensor=false"></script>


     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
     <script src="http://plugins.mypopstation.com/PopStation/mapplugin?dummy=.js"></script>


    

 <div id="kiosks1" ></div>



<input type="text" id="address0" placeholder="POPStation" name="address0" />
 <input type="text" id="address1" placeholder="Storey, Unit, Building" name="address1" />
<input type="text" id="address2" placeholder="House, Street, Post Code" name="address2" />

CSS

/*

Postal Code Example:
917691, 918090, 913091

*/


/*
    To show google map with bootstrap, you have add the following overrides
*/
#map-canvas 
{ height: 500px; }
#map-canvas img {
  max-width: none;
}

#tzaddressdetail
{
    margin: 10px 0;
}

/*
(optional styles)
Additional requirement by SingPost 
Mostly to override bootstrap and jquery
remove/modify them if you have a bootstrap styles
*/

#kiosk-plugin-wrapper
{
    padding: 10px 10px;
}


/* .ui-state-default a:link, .ui-tabs .ui-tabs-nav li a,*/
 .ui-widget-content a, a {
    color: #0000FF;
    text-decoration: underline;
}
.ui-widget-content a:hover, .ui-state-default a:hover, a:hover
{
    cursor: pointer;
}



.nav
{
    margin-bottom: 0;
}

.nav-pills > li > a
{
    padding: 8px 8px;
}

body, #kiosk-plugin-wrapper, label, button, select, input[type="text"], 
.btn, .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button
{
    font-family: Arial;
    font-size: 10pt;
}

label
{
    cursor: auto;
}

.label-important
{
    background-color: #ff0000;
}


.control-group.error input, .control-group.error select, .control-group.error textarea {
    border-color: #ff0000;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

#lblinvalidpostcode, .error, 
.control-group.error .control-label, .control-group.error .help-block, .control-group.error .help-inline ,
.control-group.error .checkbox, .control-group.error .radio, .control-group.error input, .control-group.error select, .control-group.error textarea
{
    color: #ff0000;
}


.ui-tabs-panel
{
    /*-_-*/
    height: 110px;
    padding-left: 10px;
    padding-right: 10px;
}

/*.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: Arial,sans-serif;
    font-size: 1em;
}*/

.tab-content
{
    padding: 20px 0;
}

input.tzpostcode
{
    width: 110px;
}

/*

*/

JavaScript

$('#kiosks1').KioskMapPlugin({
                    addressPattern: { 
                        'address0': ['sp_POPStationName'],
                        'address1':['sp_Storey', 'sp_UnitNumber', 'sp_BuildingName'],
                        'address2': ['sp_HouseBlockNumber','sp_StreetName','sp_PostCode']
                    },
                    addressSepartor: ", ",
                    mapHeight: '300px',
                    mapWidth: 'auto'
                });