Google Maps v3 Shapes -

i trying take string has shape option information , create shape on google map application.

the string made splitting array built local text document.

the string appears as: circle{center: new google.maps.latlng(38.041872419557094, -87.6046371459961),radius:5197.017394363823,fillcolor: '#000000',strokeweight: 1,strokecolor: '#000000',map:map};

the function have take such string , make shape appears as:

function loaddrawings(evt) {     var f = evt.target.files[0];      if (!f)      {         alert("failed load file");     }      else if (!f.type.match('text.*'))      {         alert(f.name + " not valid text file.");     }      else      {         var r = new filereader();         r.onload = function (e)          {             var contents = e.target.result;             var drawings = [];             var drawing;             var drawingtype;             var shape;             var shapeoptions;              drawings = contents.split(";");             (i = 0; < drawings.length - 1; i++) {                 drawing = drawings[i].tostring();                 drawingtype = drawing.substr(0, drawing.indexof('{'));                 if (drawingtype == "circle")                 {                     shapeoptions = drawing.substr(6);                //unique circle                     shape = new google.maps.circle(shapeoptions);                     shape.setmap(map);                 }                                 };         }         r.readastext(f);     }  } 

my issue shapeoptions string not work in above syntax creating circle. however, if take contents of string, is:

{center: new google.maps.latlng(38.041872419557094, -87.6046371459961),radius:5197.017394363823,fillcolor: '#000000',strokeweight: 1,strokecolor: '#000000',map:map}

and directly enter it, shape appears.

do need variable type shapeoptions work? know new google.maps. requires (), have had no luck creating variable string. missing here?

much appreciation help!

your shapeoptions string javascript object literal, can eval() object:

shapeoptions = eval( '(' + drawing.substr(6) + ')' ); 

since has map:map in it, don't need subsequent setmap() call.

also, you're missing var i variable. don't recommend coding style var statements go @ top of function. find error-prone; it's easy omit var without noticing it. (i know famous javascript experts insist var @ top only way it, fail see tradeoffs involved.)

you don't need .tostring() on drawings[i]. it's string.

you have 2 different brace styles. best pick 1 , stick it. javascript, putting { on line not recommended, because code not expect:

return  // hoping return object literal - doesn't! {     a: 'b',     c: 'd' } 

whereas code work correctly:

return {     a: 'b',     c: 'd' } 

since using filereader, think it's safe assume have .foreach() available.

you can replace code uses .indexof() , hard coded length regular expression.

putting together, might end code this:

var r = new filereader(); r.onload = function( e ) {     e.target.result.split(";").foreach( function( drawing ) {         var match = drawing.match( /^(\w+)({.*})$/ );         if( ! match ) return;  // unrecognized         var type = match[0], options = eval( match[1] );         switch( type ) {             case "circle":                 new google.maps.circle( options );                 break;         }     }); } r.readastext( f ); 

but may able take step further. far we're looking @ circle (line breaks added readability):

circle{     center: new google.maps.latlng(         38.041872419557094,         -87.6046371459961     ),     radius:5197.017394363823,     fillcolor: '#000000',     strokeweight: 1,     strokecolor: '#000000',     map:map } 

with simple change, executed javascript directly. need 'new google.maps.' @ beginning , () around object literal:

new google.maps.circle({     center: new google.maps.latlng(         38.041872419557094,         -87.6046371459961     ),     radius:5197.017394363823,     fillcolor: '#000000',     strokeweight: 1,     strokecolor: '#000000',     map:map }) 

i assume have other drawing types well? map directly google.maps.* objects circle does? if so, do:

var r = new filereader(); r.onload = function( e ) {     e.target.result.split(";").foreach( function( drawing ) {         eval( drawing.replace(             /^(\w+)({.*})$/,             'new google.maps.$1(\$2)'         ) );     }); } r.readastext( f );