how to use javascript to update markers on Google maps

rubyonrails-talk
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 use rjs Ajax request\. Please refer the

following links, you will get an idea.

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

3

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

4

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.

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

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

}

});

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

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.

9

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:

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

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

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<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

12

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<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

14

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