Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm trying to push into an arry in which I have all the latlng coordinates of some markers from user input (text field), but I'm having some troubles, since new data it's not pushed into the array. Does anyone knows what I'm doing wrong?

here's my code:

var locations = [
new google.maps.LatLng(0.0,0.0),
var map;
function initialize() 
var myLatlng = new google.maps.LatLng(0.0,0.0);
var myOptions = 
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker, i;
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: locations[i],
        map: map
function add_item(){
var item = document.frm.inputbox.value;
locations.push(item);
document.frm.outputbox.value = locations;
and in the body I have the map div and the two input boxes:
<div id="map_canvas" style="width:750; height:500"></div>
<form name="frm">
Input<input type="text" name="inputbox" value=""/>
Output<input type="text" name="outputbox" value=""/>
<input type="button" onClick="add_item(); initialize();" value="Push"/>
The function add_item isn't working as I would like it to do though..  the result of add_item is an array with "(0.0,0.0),NEWITEM", so it deletes "new google.maps.LatLng" from the locations variable values. The problem is that I really need the new google.maps.LatLng part, so I would need that the new item is added as a new line inside the brackets []...
But I have no ideas...
                I've refined the code in the meanwhile. I first found out that one problem was that I had declared the variable locations as local, so now I have made it global. Now the result of add_item is an array with "(0.0,0.0),NEWITEM", so it deletes "new google.maps.LatLng" from the locations variable. The problem is that I really need it, so I would need that the new item is added as a new line inside the brackets []...
– don
                Dec 8, 2011 at 22:35
your locations array is in local scope to initialize function
you have a stray comma after you add the initial location to your array
Your first point is stored as a google LatLng object, but your add_item function simply grabs the text from the input box and tries to push it to an array so if you try and display that location it will error out as the points must be added to the map as LatLng objects
LatLng object expects input to be an two integers, if you store raw input from an input box you will get a string like that "90,0" which is an invalid argument for the LatLng object
so this what your script should look like (not tested)
var map;
    var locations = [];
    function initialize() {
        var myLatlng = new google.maps.LatLng(0.0, 0.0);
        var myOptions = {
            zoom : 4,
            center : myLatlng,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//if you want to store your coordinates as a stingg you should be consistent
        locations.push("0.0,0.0");
show_markers();
    function show_markers() {
        for(var i = 0; i < locations.length; i++) {
            //if you are expecting a user to input a single pair of coordinates in the input box you will need to do this
            var loc = locations[i].split(",")
            var lat = parseFloat(loc[0])
            var lng = parseFloat(loc[1])
            marker = new google.maps.Marker({
                position : new google.maps.LatLng(lat, lng), 
                map : map
    function add_item() {
        var item = document.frm.inputbox.value;
        locations.push(item);
        show_markers();
        document.frm.outputbox.value = locations;
If you want to store the whole array as google LatLng Objects and you assume that the user will enter data in the input box in lat,long pairs separated by a space you can replace the relevant functions above with.. (and take out the initial locations push from initialize)
    function show_markers() {
            for(var i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position : locations[i], 
                    map : map
        function add_item() {
locations = [] //assuming that the input box always contains the full set of coordinates you need to reset the locations array
            var item = document.frm.inputbox.value;
            //assuming that user entered data like this 0.0,0.0 70.2,30.6 33.5,120
            var items = item.split(" ");
            for (var i=0; i<items.length; i++){
                var loc = items[i].split(",")
                var lat = parseFloat(loc[0])
                var lng = parseFloat(loc[1])
                pos = new google.maps.LatLng(lat, lng)
                locations.push(pos);
            show_markers();
            document.frm.outputbox.value = locations;
                Sort of.. One thing is that locations.push("0.0,0.0"); inside initialize function means that every time I ran the script a new 0.0,0.0 is added (I refresh the map each time, so I took it out. My other problem is that I then need a string with all the latlng values, but in this format: [new google.maps.LatLng(0.0,0.0), new google.map.Lat ... ] but I really don't know how to "build" such string starting from the code you suggested... Any idea?
– don
                Dec 8, 2011 at 22:51
                you need to remove initialize() call from onClick. You don't need it anymore as it will try to reinitialize your entire map.
– Michal
                Dec 8, 2011 at 22:54
                Sure!! Sorry... But then is there a way to retrieve all the locations and build a string formatted as this: [new google.maps.LatLng(0.0,0.0), etc. ]? Sorry to bother you again, but actually this is the core element I'm trying to achieve, but so far I don't have any good result...
– don
                Dec 8, 2011 at 23:07
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.