Jquery variable type issue

Question

I have the following script which uses a drop down index to create a reference to a variable to plot coordinates on a Google map. These are the co-ordinate objects:

var posl0 = { lat: 53.486204, lng: -3.217980 };
var posl1 = { lat: 51.493399, lng: -2.994917 };
var posl2 = { lat: 53.328493, lng: -3.098814 };
var posl3 = { lat: 53.412157, lng: -2.838219 };
var posl4 = { lat: 53.481338, lng: -2.886647 };
var posl5 = { lat: 53.401431, lng: -2.994917 };
var posl6 = { lat: 53.513252, lng: -2.944996 };
var posl7 = { lat: 53.372710, lng: -3.183254 };
var posl8 = { lat: 53.374466, lng: -2.868754 };

This is my script:

function addnewmarker(selc, mapno) {
    var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool  City", "Maghull", "West Kirby", "Woolton"];
    var pos = 'posl' + mapno;
    var pos.toArray();
    alert(pos);
    marker = new google.maps.Marker({
        position: pos,
        map: map,
        title: 'Aintree',
        animation: google.maps.Animation.DROP,
    });
    adsho(1);
}

My issue appears to be with my use of the pos variable as a pointer to the posl object. If I enter the position as position: posl1 all works fine but position: pos does nothing although it alerts the same posl1 ref.

Can anyone help / advise please?

Your variable pos is a string. See that post to see how to dynamically reference variables : http://stackoverflow.com/questions/5117127/use-dynamic-variable-names-in-javascript — Lex Lustor, May 06 '16 at 10:19
You're not using pos as a pointer to anything-you have no array to point to. You have a wad of unrelated variables. Why *aren't* you using an array? — Dave Newton, May 06 '16 at 10:19

score 3 · Accepted Answer · answered May 06 '16 at 10:21

The issue is because your pos value is a string, not a reference to the object held in the posX variable. You could use eval() to fix this, but eval() is incredibly bad practice and should be avoided.

Instead, you can achieve what you need by instead placing all your objects in to an array and then accessing them by index. Something like this:

var pos = [{ lat: 53.486204, lng: -3.217980 },{ lat: 51.493399, lng: -2.994917 },{ lat: 53.328493, lng: -3.098814 },{ lat: 53.412157, lng: -2.838219 },{ lat: 53.481338, lng: -2.886647 },{ lat: 53.401431, lng: -2.994917 },{ lat: 53.513252, lng: -2.944996 },{ lat: 53.372710, lng: -3.183254 },{ lat: 53.374466, lng: -2.868754 }]

function addnewmarker(selc, mapno) {
    var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool  City", "Maghull", "West Kirby", "Woolton"];

    marker = new google.maps.Marker({
        position: pos[mapno],
        map: map,
        title: 'Aintree',
        animation: google.maps.Animation.DROP,
    });
    adsho(1);
}

Also note that your use of jQuery's toArray() is not required (and most likely caused errors) and the locaz array is not used, but I assume this is simply due to redacting parts of your code in the question.

thanks for your help man - works a treat and nicely explained — Dancer, May 06 '16 at 10:29

score 0 · Answer 2 · answered May 06 '16 at 10:17

0

Replace this line

var pos = eval('posl' + mapno);

answered May 06 '16 at 10:17

Ridvan Shaikh

152
1
10

1

Ew. While it might work, it hardly seems like the best, or even a reasonable, solution. Eval odd only rarely a good approach. – Dave Newton May 06 '16 at 10:21
**Object-Oriented JavaScript - Second Edition**: eval() can be useful sometimes, but should be avoided if there are other options. Most of the time there are alternatives, and in most cases the alternatives are more elegant and easier to write and maintain. "Eval is evil" is a mantra you can often hear from seasoned JavaScript programmers. – Ali Mamedov May 06 '16 at 10:21

itzmukeshy7 · Answer 3 · 2016-05-06T10:32:36.187

Try this ;)

The way you are creating array of elements is wrong and the way you are using to access the element from the array is again wrong;

You can add element to array one by one or multiple when you are defining it;

Multiple elements when creating array;

var array = [1, 2, 3, 4, 6, 7];/* in this way you can assign as many elements you want to add to this array array index starts from 0; */

var array = []; /* empty array later you can add elements to it */

array[0] = 1;
array[1] = 2; /* add element to directly at desired index */

array.push(1);
array.push(2);/* add element to array at the end */

So in your case try this

var positions = [{ lat: 53.486204, lng: -3.217980 },
    { lat: 51.493399, lng: -2.994917 },
    { lat: 53.328493, lng: -3.098814 },
    { lat: 53.412157, lng: -2.838219 },
    { lat: 53.481338, lng: -2.886647 },
    { lat: 53.401431, lng: -2.994917 },
    { lat: 53.513252, lng: -2.944996 },
    { lat: 53.372710, lng: -3.183254 },
    { lat: 53.374466, lng: -2.868754 }];


function addnewmarker(selc, mapno) {
    var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool  City", "Maghull", "West Kirby", "Woolton"];
    var pos = positions[mapno];
    alert(pos);
    marker = new google.maps.Marker({
        position: pos,
        map: map,
        title: 'Aintree',
        animation: google.maps.Animation.DROP,
    });
    adsho(1);
 }

Could you help the OP by adding some explanation of what the OPs issue is and how this helps? — Rory McCrossan, May 06 '16 at 10:24

Jquery variable type issue

3 Answers3