# inputEx - MapField Usage

## Virtual Earth MapField creation

Use the following code to create a inputEx MapField for Virtual Earth.

var id = 'container1'; var api = 'virtualearth'; var elExample1 = new inputEx.MapField({parentEl: id, name: 'mapField', width: '800px', api: api}); var elButton1 = inputEx.cn('button', null, null, "getValue"); YAHOO.util.Event.addListener(elButton1, 'click', function() { alert(YAHOO.lang.JSON.stringify(elExample1.getValue()) ); }); YAHOO.util.Dom.get(id).appendChild(elButton1);

## Yahoo Maps MapField creation

Use the following code to create a inputEx MapField for Yahoo Maps.

var id = 'container2'; var api = 'yahoo'; var elExample2 = new inputEx.MapField({parentEl: id, name: 'mapField', width: '800px', api: api}); var elButton2 = inputEx.cn('button', null, null, "getValue"); YAHOO.util.Event.addListener(elButton2, 'click', function() { alert( YAHOO.lang.JSON.stringify(elExample2.getValue()) ); }); YAHOO.util.Dom.get(id).appendChild(elButton2);

## Google Maps MapField creation

Use the following code to create a inputEx MapField for Google Maps.

var id = 'container3'; var api = 'google'; var elExample3 = new inputEx.MapField({parentEl: id, name: 'mapField', width: '800px', api: api}); var elButton3 = inputEx.cn('button', null, null, "getValue"); YAHOO.util.Event.addListener(elButton3, 'click', function() { alert( YAHOO.lang.JSON.stringify(elExample3.getValue()) ); }); YAHOO.util.Dom.get(id).appendChild(elButton3);

## Default MapField creation

Use the following code to create a inputEx MapField for whatever the default API is. We should complete this example by making buttons to change the default and store that in cookies.

var id = 'container4'; var elExample4 = new inputEx.MapField({parentEl: id, name: 'mapField', width: '800px'}); var elButton4 = inputEx.cn('button', null, null, "getValue"); YAHOO.util.Event.addListener(elButton4, 'click', function() { alert( YAHOO.lang.JSON.stringify(elExample4.getValue()) ); }); YAHOO.util.Dom.get(id).appendChild(elButton4);