how to use javascript to update markers on Google maps

Hey all,
i have a google map and i am drawing circles on the map like this..

var latlng = new google.maps.LatLng(35.931387,
-102.31062);
    var myMapOptions =
{
      zoom:
12,
      center:
latlng,
      mapTypeId:
google.maps.MapTypeId.HYBRID
    };

    var map = new
google.maps.Map(document.getElementById("map_canvas"),
myMapOptions);
    var infoWindow = new
google.maps.InfoWindow();
    var markerBounds = new
google.maps.LatLngBounds();

   <% @mapped_sites.each do |row|
%>

        // main
circle
        center = new google.maps.LatLng(<%= "#{row[0]}" %>, <%=
"#{row[1]}"
%>);
        siteCircle =
makeMarker({
          position:
center,
          strokeColor:
"#FF0000",
          strokeOpacity:
0.8,
          strokeWeight:
2,
          fillColor: '<%= "#{row[7]}"
%>',
          fillOpacity:
0.75,
          radius:
560,
          map:
map,
          center:
center,
          radius: <%= "#{row[2]}"
%>,
          title: '<%= "#{row[5]}"
%>',
          content: '<%= "some contnet
%>'
       });

       markerArray.push(siteCircle);

my question is, that since the fillColor is going to change from time
to time, i want to update all the colors of the circles periodically.
What i don't know how to do is get the equivelent to the
@mapped_sites because if i could, i think i could just delete the
existing circles and draw new ones.

How do i get info back from the server periodically to update the
circle colors?

thanks to all.
skrite

Hi,

  For this you need to use rjs Ajax request\. Please refer the

following links, you will get an idea.

1. http://railscasts.com/episodes/43-ajax-with-rjs?autoplay=true,
2. http://railscasts.com/episodes/229-polling-for-changes?autoplay=true

Hey, thanks for these links, very helpful.
-sk

Hey, thanks for these links, very helpful.

-sk

Hi,

  For this you need to use rjs Ajax request. Please refer the

following links, you will get an idea.

1.http://railscasts.com/episodes/43-ajax-with-rjs?autoplay=true,

2.http://railscasts.com/episodes/229-polling-for-changes?autoplay=true

one more option is to keep @mapped_sites to a javascript variable so you

dont have to use ajax. you might also want to move the makeMarker part

to a js function to tidy up the view and just call that function when you need

to update the colors

something along the lines of

var sites = <%= @mapped_sites.to_json %>;

addCircles(sites);

function addCircles(circles) {

for(i=0; i<circles.length; i++) {

center = new google.maps.LatLng(circles[i][0], circles[i][1]);

siteCircle = makeMarker({
  position: center,
  strokeColor: "#FF0000",

  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: circles[i][7],
  fillOpacity: 0.75,
  radius: 560,
  map: map,
  center: center,
  radius: circles[i][2],

  title: circles[i][5],

  content: 'content'

});

}

}

then you just need to update the sites variable using js. no need

to go back to the server.

I am intrigued by this solution, Jim.
i have a couple of questions, as it seems this is a cleaner way than
what I am trying to do.
The values that determine the circle color are in the database, and
can change while the page is loaded. This is why i need them to
update.
So, somehow i still need to go to the server for that. I guess i am
missing the part about how to get the @mapped_sites variable to the
controller and back again to the page to rebuild the circles.
Thanks for your time on this.
sk

I am intrigued by this solution, Jim.

i have a couple of questions, as it seems this is a cleaner way than

what I am trying to do.

The values that determine the circle color are in the database, and

can change while the page is loaded. This is why i need them to

update.

i’ll still go with my suggestion earlier. To update the colors, just update

the sites variable after completing the ajax request and then call addCircles

your ajax call may look like the following (this is totally untested :D)

$.ajax({

url: your_url_here_that_returns_json_equivalent_of_@mapped_sites,

success: function(data) {

addCircles(data);

}

});

I am doing something similar here. The website is built on rails 2.3.9
and
uses prototype.

Almost all of what i need to happen does, but i get to the point where
the update happens and nothing does.

// add circles to map as it
initializes
    addCircles(sites, map, markerArray,
lineArray);

    var pe = new
PeriodicalExecuter(refreshCircleMarkers.curry(markerArray, lineArray,
map),
33);

    function refreshCircleMarkers(markerArray, lineArray, map)
{

      // first we remove the existing markers in
place
      for(i=0; i<markerArray.length; i++)
{

markerArray[i].setMap(null);
      }
      // and empty the array
itself
      markerArray =
[];

      var url = "/group/
update_mapv3_circles";
      new Ajax.Request(url,
{
        method:
'get',
        onSuccess: function(response)
{
          var sites =
response.responseText;
          addCircles(sites, map, markerArray,
lineArray);
    }
      });

If i do an alert(response.responseText) the alert will show up and
display the contents of the @mapped_sites.to_json ( i am using
render :json => @mapped_sites.to_json in the controller).
Please let me know if you see something i am doing wrong.
Thanks for your help on this so far Jim.

sk

I am doing something similar here. The website is built on rails 2.3.9

and

uses prototype.

Almost all of what i need to happen does, but i get to the point where

the update happens and nothing does.

// add circles to map as it initializes

addCircles(sites, map, markerArray, lineArray);



var pe = new PeriodicalExecuter(refreshCircleMarkers.curry(markerArray, lineArray, map), 33);

function refreshCircleMarkers(markerArray, lineArray, map) {
// first we remove the existing markers in place
for(i=0; i<markerArray.length; i++) {
markerArray[i].setMap(null);
}
// and empty the array itself
markerArray = [];

var url = “/group/update_mapv3_circles”;
new Ajax.Request(url, {
method: ‘get’,
onSuccess: function(response) {
var sites = response.responseText;
addCircles(sites, map, markerArray, lineArray);

}

});

I see nothing wrong. Does the addCircles function expect a JSON

object for the first param? The only reason I can think why this isn’t working

is a type mismatch.

Jim.

You are correct, when i show typeof(sites) from when sites = <%=
@mapped_sites =>
i get object
when i do typeof(sites) after getting sites from the
url_that_returns_json
i get string

i suppose that i am not getting returned correctly.
if i look at the source of @mapped_sites
and from the browser look at url_that_returns_json,
they are identical.

thanks for your help, again.
I have learned a lot the last couple of days :slight_smile:

Jim.

You are correct, when i show typeof(sites) from when sites = <%=
@mapped_sites =>
i get object
when i do typeof(sites) after getting sites from the
url_that_returns_json
i get string

responseText is always going to be text if I remember how prototype handles thing (the text will just happen to be the string representation of the json).
If the response content-type was set correctly then response.responseJson (or something like that) should be populated

Fred

ok, even though the @mapped_sites.to_json works, the output of that
does not look like json. It looks like an array

example:

var sites = [["35.931341","-102.32205",381.75,288.0,"AL","AL",
557,"#7F7F7F","#FF0000",287.1,288.3,"AL<br>0 psi",0],
["35.88125039","-102.3088989",525.0,83.4,"DC","DC",
34280,"#7F7F7F","#FF0000",83.1,83.3,"DC<br>0 psi",0],
["35.88125039","-102.3226989",525.0,81.7,"DC2","DC2",
37241,"#000000","#FF0000",81.7,81.7,"DC2<br>0 psi",0],
["35.92361","-102.308768",534.75,73.7,"J1","J1",
559,"#7F7F7F","#FF0000",74.7,73.8,"J1<br>0 psi",0],
["35.92332","-102.32096",493.5,261.0,"J2","J2",560,"#7F7F7F","#FF0000",
261.0,261.0,"J2<br>0 psi",0],["35.931354","-102.31308",
397.5,80.8,"SL1","SL1",561,"#7F7F7F","#FF0000",81.3,81.9,"SL1<br>0
psi",0],["35.931186","-102.304202",390.0,165.2,"SL2","SL2",
110823130,"#7F7F7F","#FF0000",165.4,165.6,"SL2<br>0 psi",0],
["35.938729","-102.29968",397.5,89.3,"SL4","SL4",
563,"#7F7F7F","#FF0000",89.3,89.3,"SL4<br>0 psi",0],
["35.931301","-102.29965",397.5,23.7,"SL5","SL5",
564,"#7F7F7F","#FF0000",23.9,23.0,"SL5<br>0 psi",0],
["35.924694","-102.299034",333.75,95.8,"SL6","SL6",
7882,"#7F7F7F","#FF0000",95.8,95.8,"SL6<br>0 psi",0]];

and the code seems to work with it like an array. How do i get the
responseText from the server as an array?

thanks again.

sk

ok, even though the @mapped_sites.to_json works, the output of that
does not look like json. It looks like an array

If my memory is correct, that's valid json too ( as are most literals). It's common for the top level thing to be an object rather than an array, but not mandatory. Since the thing you called to_json on was an array, you got the json representation of an array back.

To get the non text version of the response, like I said earlier look at response.responseJSON

Fred

OK, i did try your example and the circles disappear, but never
update. Then, nothing. there are no errors in the inspect element of
chrome under the console, nothing updates, it just kinda freezes
there. I can see the queries being pulled in the webrick server logs.
a prettier image of the code is here http://pastie.org/3014696
(also more complete).
I know i am fumbling over something obvious here, but just cannot seem
to work it out.

when i use the request address update_mapv3_circles in a browser, this
is the response
[["35.931341","-102.32205",381.75,287.4,"AL","AL",
557,"#7F7F7F","#FF0000",287.8,287.6,"AL<br>0 psi",0],
["35.88125039","-102.3088989",525.0,83.4,"DC","DC",
34280,"#7F7F7F","#FF0000",83.6,83.1,"DC<br>0 psi",0],
["35.88125039","-102.3226989",525.0,81.7,"DC2","DC2",
37241,"#000000","#FF0000",81.7,81.7,"DC2<br>0 psi",0],
["35.92361","-102.308768",534.75,74.8,"J1","J1",
559,"#7F7F7F","#FF0000",74.6,74.5,"J1<br>0 psi",0],
["35.92332","-102.32096",493.5,261.0,"J2","J2",560,"#7F7F7F","#FF0000",
261.0,261.0,"J2<br>0 psi",0],["35.931354","-102.31308",
397.5,82.1,"SL1","SL1",561,"#7F7F7F","#FF0000",80.9,81.9,"SL1<br>0
psi",0],["35.931186","-102.304202",390.0,165.4,"SL2","SL2",
110823130,"#7F7F7F","#FF0000",165.5,165.6,"SL2<br>0 psi",0],
["35.938729","-102.29968",397.5,89.3,"SL4","SL4",
563,"#7F7F7F","#FF0000",89.3,89.3,"SL4<br>0 psi",0],
["35.931301","-102.29965",397.5,23.4,"SL5","SL5",
564,"#7F7F7F","#FF0000",23.0,23.4,"SL5<br>0 psi",0],
["35.924694","-102.299034",333.75,95.8,"SL6","SL6",
7882,"#7F7F7F","#FF0000",95.8,95.8,"SL6<br>0 psi",0]]

in the view source of the website where <%= @mapped_sites.to_json %>
is , i have this
var sites = [["35.931341","-102.32205",381.75,287.4,"AL","AL",
557,"#7F7F7F","#FF0000",287.8,287.6,"AL<br>0 psi",0],
["35.88125039","-102.3088989",525.0,83.4,"DC","DC",
34280,"#7F7F7F","#FF0000",83.6,83.1,"DC<br>0 psi",0],
["35.88125039","-102.3226989",525.0,81.7,"DC2","DC2",
37241,"#000000","#FF0000",81.7,81.7,"DC2<br>0 psi",0],
["35.92361","-102.308768",534.75,74.8,"J1","J1",
559,"#7F7F7F","#FF0000",74.6,74.5,"J1<br>0 psi",0],
["35.92332","-102.32096",493.5,261.0,"J2","J2",560,"#7F7F7F","#FF0000",
261.0,261.0,"J2<br>0 psi",0],["35.931354","-102.31308",
397.5,82.1,"SL1","SL1",561,"#7F7F7F","#FF0000",80.9,81.9,"SL1<br>0
psi",0],["35.931186","-102.304202",390.0,165.4,"SL2","SL2",
110823130,"#7F7F7F","#FF0000",165.5,165.6,"SL2<br>0 psi",0],
["35.938729","-102.29968",397.5,89.3,"SL4","SL4",
563,"#7F7F7F","#FF0000",89.3,89.3,"SL4<br>0 psi",0],
["35.931301","-102.29965",397.5,23.4,"SL5","SL5",
564,"#7F7F7F","#FF0000",23.0,23.4,"SL5<br>0 psi",0],
["35.924694","-102.299034",333.75,95.8,"SL6","SL6",
7882,"#7F7F7F","#FF0000",95.8,95.8,"SL6<br>0 psi",0]];

Anyway, thanks for all of your help so far, this is at least less
baffling to me than it was a couple of days ago.

sk

OK, i did try your example and the circles disappear, but never
update. Then, nothing. there are no errors in the inspect element of
chrome under the console, nothing updates, it just kinda freezes
there. I can see the queries being pulled in the webrick server logs.
a prettier image of the code is here http://pastie.org/3014696
(also more complete).

Because you've called the parameter that is passed to you Ajax callback 'response', you need response.responseJSON not request.responseJSON
Stick a breakpoint in there to investigate further
Fred

That did it !
See what i mean about something obvious?
Thanks very much for your help on this.
You have been a terrific, and patient teacher.

sk