Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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...
–
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;
–
–
–
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.
