%PDF-
%PDF-
Mini Shell
Mini Shell
(function ( $ )
{
'use strict';
// Use function construction to store map & DOM elements separately for each instance
var MapField = function ( $container )
{
this.$container = $container;
};
// Use prototype for better performance
MapField.prototype = {
// Initialize everything
init : function ()
{
this.initDomElements();
this.initMapElements();
this.initMarkerPosition();
this.addListeners();
this.autocomplete();
},
// Initialize DOM elements
initDomElements : function ()
{
this.canvas = this.$container.find( '.rwmb-map-canvas' )[0];
this.$coordinate = this.$container.find( '.rwmb-map-coordinate' );
this.$findButton = this.$container.find( '.rwmb-map-goto-address-button' );
this.addressField = this.$findButton.val();
},
// Initialize map elements
initMapElements : function ()
{
var defaultLoc = $( this.canvas ).data( 'default-loc' ),
latLng;
defaultLoc = defaultLoc ? defaultLoc.split( ',' ) : [53.346881, -6.258860];
latLng = new google.maps.LatLng( defaultLoc[0], defaultLoc[1] ); // Initial position for map
this.map = new google.maps.Map( this.canvas, {
center : latLng,
zoom : 14,
streetViewControl: 0,
mapTypeId : google.maps.MapTypeId.ROADMAP
} );
this.marker = new google.maps.Marker( { position: latLng, map: this.map, draggable: true } );
this.geocoder = new google.maps.Geocoder();
},
// Initialize marker position
initMarkerPosition: function ()
{
var coord = this.$coordinate.val(),
l,
zoom;
if ( coord )
{
l = coord.split( ',' );
this.marker.setPosition( new google.maps.LatLng( l[0], l[1] ) );
zoom = l.length > 2 ? parseInt( l[2], 10 ) : 14;
this.map.setCenter( this.marker.position );
this.map.setZoom( zoom );
}
else if ( this.addressField )
{
this.geocodeAddress();
}
},
// Add event listeners for 'click' & 'drag'
addListeners : function ()
{
var that = this;
google.maps.event.addListener( this.map, 'click', function ( event )
{
that.marker.setPosition( event.latLng );
that.updateCoordinate( event.latLng );
} );
google.maps.event.addListener( this.marker, 'drag', function ( event )
{
that.updateCoordinate( event.latLng );
} );
this.$findButton.on( 'click', function ()
{
that.geocodeAddress();
return false;
} );
},
// Autocomplete address
autocomplete : function ()
{
var that = this;
// No address field or more than 1 address fields, ignore
if ( !this.addressField || this.addressField.split( ',' ).length > 1 )
{
return;
}
$( '#' + this.addressField ).autocomplete( {
source: function ( request, response )
{
// TODO: add 'region' option, to help bias geocoder.
that.geocoder.geocode( {
'address': request.term
}, function ( results )
{
response( $.map( results, function ( item )
{
return {
label : item.formatted_address,
value : item.formatted_address,
latitude : item.geometry.location.lat(),
longitude: item.geometry.location.lng()
};
} ) );
} );
},
select: function ( event, ui )
{
var latLng = new google.maps.LatLng( ui.item.latitude, ui.item.longitude );
that.map.setCenter( latLng );
that.marker.setPosition( latLng );
that.updateCoordinate( latLng );
}
} );
},
// Update coordinate to input field
updateCoordinate : function ( latLng )
{
this.$coordinate.val( latLng.lat() + ',' + latLng.lng() );
},
// Find coordinates by address
// Find coordinates by address
geocodeAddress : function ()
{
var address,
addressList = [],
fieldList = this.addressField.split( ',' ),
loop,
that = this;
for ( loop = 0; loop < fieldList.length; loop++ )
{
addressList[loop] = jQuery( '#' + fieldList[loop] ).val();
}
address = addressList.join( ',' ).replace( /\n/g, ',' ).replace( /,,/g, ',' );
if ( address )
{
this.geocoder.geocode( { 'address': address }, function ( results, status )
{
if ( status === google.maps.GeocoderStatus.OK )
{
that.map.setCenter( results[0].geometry.location );
that.marker.setPosition( results[0].geometry.location );
that.updateCoordinate( results[0].geometry.location );
}
} );
}
}
};
$( function ()
{
$( '.rwmb-map-field' ).each( function ()
{
var field = new MapField( $( this ) );
field.init();
$( this ).data( 'mapController', field );
} );
$( '.rwmb-input' ).on( 'clone', function ()
{
$( '.rwmb-map-field' ).each( function ()
{
var field = new MapField( $( this ) );
field.init();
$( this ).data( 'mapController', field );
} );
} );
} );
})( jQuery );
Zerion Mini Shell 1.0