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 elExample = new YAHOO.inputEx.MapField({parentEl: id, name: 'mapField', width: '800px', api: api}); var elButton = YAHOO.inputEx.cn('button', null, null, "getValue"); YAHOO.util.Event.addListener(elButton, 'click', function() { alert( YAHOO.lang.JSON.stringify(elExample.getValue()) ); }); YAHOO.util.Dom.get(id).appendChild(elButton);

Yahoo Maps MapField creation

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

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

Google Maps MapField creation

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

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

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 elExample = new YAHOO.inputEx.MapField({parentEl: id, name: 'mapField', width: '800px'}); var elButton = YAHOO.inputEx.cn('button', null, null, "getValue"); YAHOO.util.Event.addListener(elButton, 'click', function() { alert( YAHOO.lang.JSON.stringify(elExample.getValue()) ); }); YAHOO.util.Dom.get(id).appendChild(elButton);