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...
Best Answer
You have a few of errors here
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 consistentlocations.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 thisvar 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 arrayvar item = document.frm.inputbox.value;//assuming that user entered data like this 0.0,0.0 70.2,30.6 33.5,120var 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;}