How to use javascript to update markers on Google maps

Rails
1

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

2

Hi,

For this you need to userjs Ajax request. Please refer the
following links, you will get an idea.

  1. #43 AJAX with RJS - RailsCasts,
  2. #229 Polling for Changes - RailsCasts

On Thu, Dec 8, 2011 at 1:10 AM, skrite [email protected] wrote:

12,
google.maps.InfoWindow();
“#{row[1]}”
2,
radius: <%= “#{row[2]}”
to time, i want to update all the colors of the circles periodically.

–
You received this message because you are subscribed to the Google G. “Ruby
on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–

Regards,
L.KarthiKeyan.

3

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

4

On Fri, Dec 9, 2011 at 11:04 PM, skrite [email protected] wrote:

2.#229 Polling for Changes - RailsCasts

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.

Hey all,
mapTypeId:

     position:

0.75,
content: '<%= "some contnet

.

You received this message because you are subscribed to the Google G.
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–

5

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

6

On Sat, Dec 10, 2011 at 3:56 AM, skrite [email protected] wrote:

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);
}
});

one more option is to keep @mapped_sites to a javascript variable so you
function addCircles(circles) {
map: map,
to go back to the server.

12,
google.maps.InfoWindow();
%>);
fillColor: '<%= “#{row[7]}”
%>,
to time, i want to update all the colors of the circles

.
You received this message because you are subscribed to the Google G.
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–

7

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

8

On Tue, Dec 13, 2011 at 6:08 AM, skrite [email protected] wrote:

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

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.

On Dec 9, 11:49 pm, Jim Ruther N. [email protected] wrote:

the sites variable after completing the ajax request and then call

controller and back again to the page to rebuild the circles.

part

function addCircles(circles) {
map: map,
to go back to the server.

{
myMapOptions);
center = new google.maps.LatLng(<%= “#{row[0]}” %>, <%=
strokeWeight:
center,
my question is, that since the fillColor is going to change
the
[email protected]

http://groups.google.com/group/rubyonrails-talk?hl=en.
.
You received this message because you are subscribed to the Google G.
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–

9

On 13 Dec 2011, at 19:54, skrite [email protected] wrote:

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

10

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:

11

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
0 psi”,0],
[“35.88125039”,“-102.3088989”,525.0,83.4,“DC”,“DC”,
34280,“#7F7F7F”,“#FF0000”,83.1,83.3,“DC
0 psi”,0],
[“35.88125039”,“-102.3226989”,525.0,81.7,“DC2”,“DC2”,
37241,“#000000”,“#FF0000”,81.7,81.7,“DC2
0 psi”,0],
[“35.92361”,“-102.308768”,534.75,73.7,“J1”,“J1”,
559,“#7F7F7F”,“#FF0000”,74.7,73.8,“J1
0 psi”,0],
[“35.92332”,“-102.32096”,493.5,261.0,“J2”,“J2”,560,“#7F7F7F”,“#FF0000”,
261.0,261.0,“J2
0 psi”,0],[“35.931354”,“-102.31308”,
397.5,80.8,“SL1”,“SL1”,561,“#7F7F7F”,“#FF0000”,81.3,81.9,“SL1
0
psi”,0],[“35.931186”,“-102.304202”,390.0,165.2,“SL2”,“SL2”,
110823130,“#7F7F7F”,“#FF0000”,165.4,165.6,“SL2
0 psi”,0],
[“35.938729”,“-102.29968”,397.5,89.3,“SL4”,“SL4”,
563,“#7F7F7F”,“#FF0000”,89.3,89.3,“SL4
0 psi”,0],
[“35.931301”,“-102.29965”,397.5,23.7,“SL5”,“SL5”,
564,“#7F7F7F”,“#FF0000”,23.9,23.0,“SL5
0 psi”,0],
[“35.924694”,“-102.299034”,333.75,95.8,“SL6”,“SL6”,
7882,“#7F7F7F”,“#FF0000”,95.8,95.8,“SL6
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

On Dec 13, 4:08pm, Frederick C. [email protected]

12

On 14 Dec 2011, at 05:47, skrite [email protected] wrote:

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

13

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
0 psi”,0],
[“35.88125039”,“-102.3088989”,525.0,83.4,“DC”,“DC”,
34280,“#7F7F7F”,“#FF0000”,83.6,83.1,“DC
0 psi”,0],
[“35.88125039”,“-102.3226989”,525.0,81.7,“DC2”,“DC2”,
37241,“#000000”,“#FF0000”,81.7,81.7,“DC2
0 psi”,0],
[“35.92361”,“-102.308768”,534.75,74.8,“J1”,“J1”,
559,“#7F7F7F”,“#FF0000”,74.6,74.5,“J1
0 psi”,0],
[“35.92332”,“-102.32096”,493.5,261.0,“J2”,“J2”,560,“#7F7F7F”,“#FF0000”,
261.0,261.0,“J2
0 psi”,0],[“35.931354”,“-102.31308”,
397.5,82.1,“SL1”,“SL1”,561,“#7F7F7F”,“#FF0000”,80.9,81.9,“SL1
0
psi”,0],[“35.931186”,“-102.304202”,390.0,165.4,“SL2”,“SL2”,
110823130,“#7F7F7F”,“#FF0000”,165.5,165.6,“SL2
0 psi”,0],
[“35.938729”,“-102.29968”,397.5,89.3,“SL4”,“SL4”,
563,“#7F7F7F”,“#FF0000”,89.3,89.3,“SL4
0 psi”,0],
[“35.931301”,“-102.29965”,397.5,23.4,“SL5”,“SL5”,
564,“#7F7F7F”,“#FF0000”,23.0,23.4,“SL5
0 psi”,0],
[“35.924694”,“-102.299034”,333.75,95.8,“SL6”,“SL6”,
7882,“#7F7F7F”,“#FF0000”,95.8,95.8,“SL6
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
0 psi”,0],
[“35.88125039”,“-102.3088989”,525.0,83.4,“DC”,“DC”,
34280,“#7F7F7F”,“#FF0000”,83.6,83.1,“DC
0 psi”,0],
[“35.88125039”,“-102.3226989”,525.0,81.7,“DC2”,“DC2”,
37241,“#000000”,“#FF0000”,81.7,81.7,“DC2
0 psi”,0],
[“35.92361”,“-102.308768”,534.75,74.8,“J1”,“J1”,
559,“#7F7F7F”,“#FF0000”,74.6,74.5,“J1
0 psi”,0],
[“35.92332”,“-102.32096”,493.5,261.0,“J2”,“J2”,560,“#7F7F7F”,“#FF0000”,
261.0,261.0,“J2
0 psi”,0],[“35.931354”,“-102.31308”,
397.5,82.1,“SL1”,“SL1”,561,“#7F7F7F”,“#FF0000”,80.9,81.9,“SL1
0
psi”,0],[“35.931186”,“-102.304202”,390.0,165.4,“SL2”,“SL2”,
110823130,“#7F7F7F”,“#FF0000”,165.5,165.6,“SL2
0 psi”,0],
[“35.938729”,“-102.29968”,397.5,89.3,“SL4”,“SL4”,
563,“#7F7F7F”,“#FF0000”,89.3,89.3,“SL4
0 psi”,0],
[“35.931301”,“-102.29965”,397.5,23.4,“SL5”,“SL5”,
564,“#7F7F7F”,“#FF0000”,23.0,23.4,“SL5
0 psi”,0],
[“35.924694”,“-102.299034”,333.75,95.8,“SL6”,“SL6”,
7882,“#7F7F7F”,“#FF0000”,95.8,95.8,“SL6
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

On Dec 14, 2:52am, Frederick C. [email protected]

14

On 14 Dec 2011, at 09:12, skrite [email protected] wrote:

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

15

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

On Dec 14, 3:48am, Frederick C. [email protected]