Populating Google Map V3 InfoWindow(s) with RSS info

@Jerrell_BOct 02.2012

I have been giving a task of populating 9 infowindows with RSS information. I have the RSS info stored within a text document (~~[url]~~http://artectodesignstudios.com/RSSData.txt[/url]) but i do not know the best method of retrieving and loading info into the infowindows but i’m guessing jQuery JSONP or AJAX which is why i posted here.

I should also add that i am new to Google Maps API but have learn a good amount of info in a short period of time.

This is what i have so far ~~[url]~~http://jsfiddle.net/jbryant/r9XHL/2/[/url]

Any suggestions and or solutions with explanation is appreciated. Thanks.

to post a comment

JavaScript

10 Comments(s) _↴

@xelawhoOct 02.2012 — #the problem I saw with that one was how do you make sure the right stories go into the right info windows, so I figured that it would be better to get the marker locations from the RSS file, too.

But then the locations don't seem right to me. Have a look, anyway...

(btw, the rssData.txt file needs to be in the same folder as the html file...)

[CODE]
 <!DOCTYPE html>
 <html> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 <title>Google Maps Multiple Markers</title> 
 <script src="http://maps.google.com/maps/api/js?sensor=false" 
 type="text/javascript"></script>
 </head> 
 <body>
 <div id="map" style="width: 800px; height: 600px;"></div>
 <script>
 
  var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 10,
   center: new google.maps.LatLng(42.28, 20.20),
   mapTypeId: google.maps.MapTypeId.ROADMAP
  });
 
  var infowindow = new google.maps.InfoWindow();
 
  function getData(callback) {
  url="rssData.txt"
  var txtFile = window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject('Microsoft.XMLHTTP');
  txtFile.onreadystatechange = function() {
  if (txtFile.readyState == 4) {
   callback(txtFile, txtFile.status);
   }
   };
  txtFile.open("GET", url, true); 
  txtFile.send(null);
  }
 
  getData(function(thedata) {
  var newScriptTag = document.createElement('script');
  newScriptTag.appendChild(document.createTextNode(thedata.responseText));
  document.body.appendChild(newScriptTag);
  var stories=data.value.items;
  for (var i = 0; i < stories.length; i++) { 
   var pos= new google.maps.LatLng(stories[i]["geo:lat"], stories[i]["geo:long"]);
   var header=stories[i].title;
   var content=stories[i].description;
   makeMarker(pos,header,content);
   }
  });
 
 
   function makeMarker(pos,header,content){
   var marker = new google.maps.Marker({
   position:pos,
   map: map
   });
 
   google.maps.event.addListener(marker, 'click', function() {
   infowindow.setContent("<H3>"+header+"</H3>"+content);
   infowindow.open(map, marker);
   })
  }
 
 </script> 
 
 </body>
 </html>
 [/CODE]

@Jerrell_BauthorOct 02.2012 — #Hi Xelawho - Thank you for your help. I have been searching on google for answers but there seems to be limited explanation on how approach / resolve a Google Maps V3 problem like these one. When you get a chance can you elaborate on how you resolved this problem? I am always interested in learning.

There is one other part to this project adding dem and rep icons to each marker however i want to see if i can accomplish that task on my own. :-) Thanks again.

@xelawhoOct 02.2012 — #hello Jerrell_B,

the getData function is a normal AJAX call, with a callback that makes sure the data has had time to arrive from the server before its caller is executed.

when it does get called, in this bit:
[CODE]getData(function(thedata) {[/CODE]

it basically takes the entire contents of the txt file and creates a javascript block out of it. Something I just noticed here - this line:
[CODE]newScriptTag.appendChild(document.createTextNode(thedata.responseText));[/CODE]
will fail in IE (at least in IE8 which is the only one I have), so it should be changed to this:
[CODE]newScriptTag.text=thedata.responseText;[/CODE]

from there it's just a matter of reading the data object that is contained in the txt file. I noticed that each story is in an array called items, so we get that array with this line:
[CODE]var stories=data.value.items;[/CODE]

and from there it's just a matter of looping through all the items and tracking down which bit of the "item" you want to use - the lat langs, the story, the headline, etc, referencing them correctly and passing them on to the function that creates the marker and attaches the infowindow.

good luck with the republican/democrat thing - I don't see anything in the data that differentiates the stories on those lines, so I think that will be trickier.

if you have questions feel free to ask.

@Harry14Oct 02.2012 — #thans guys,i needed these informations too,'cause i'm a newbie here

@nicksaizOct 02.2012 — #I have been charitable a job of populate 9 info windows by means of RSS in order.

@Jerrell_BauthorOct 02.2012 — #hello Xelawho,

Thank you for taking the time to explaining everything. Following your example and explanation the google map now has customized markers!!! ? I am using jsfiddle.com to display this project, however I am unable to retrieve the rssData.txt file. I change the AJAX call to the url from rssData.txt to http://artectodesignstudios.com/rssData.txt because i do not see a feature to upload files. Have you used jsfiddle and do you know how i can retrieve the rssData.txt?

@xelawhoOct 02.2012 — #Hello Jerrell,

I don't use jsfiddle much, but one of the problems of the AJAX call is that the file that you are calling has to be on the same domain. I see on the jsfiddle site that you can do jsonP using an echo, but i couldn't figure out how to do that ? :mad:

The other thing you can do is to dynamically attach that page as a script. This is actually pretty cool, because it means that you can test locally in IE, Chrome or FF (only FF allows AJAX on files stored locally). So I'm guessing that the below should fly on jsfiddle as well...

[CODE]<!DOCTYPE html>
 <html> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 <title>Google Maps Multiple Markers</title> 
 <script src="http://maps.google.com/maps/api/js?sensor=false" 
 type="text/javascript"></script>
 </head> 
 <body>
 <div id="map" style="width: 800px; height: 600px;"></div>
 <script>
 
  var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 10,
   center: new google.maps.LatLng(42.28, 20.20),
   mapTypeId: google.maps.MapTypeId.ROADMAP
  });
 
  var infowindow = new google.maps.InfoWindow();
 
  jsonRequest = function(url,callBack) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  if(script.readyState){ //for IE
   script.onreadystatechange = function(){
   if(script.readyState == "loaded" || script.readyState == "complete"){
   script.onreadystatechange = null;
   callBack();
   }
   }
  }
  else{ //other browsers
   script.onload = function(){
   callBack();
   }
  }
  script.src = url;
  document.body.appendChild(script);
 };
 
  jsonRequest("http://artectodesignstudios.com/RSSData.txt",function() {
  var stories=data.value.items;
  for (var i = 0; i < stories.length; i++) { 
   var pos= new google.maps.LatLng(stories[i]["geo:lat"], stories[i]["geo:long"]);
   var header=stories[i].title;
   var content=stories[i].description;
   makeMarker(pos,header,content);
   }
  });
 
 
   function makeMarker(pos,header,content){
   var marker = new google.maps.Marker({
   position:pos,
   map: map
   });
 
   google.maps.event.addListener(marker, 'click', function() {
   infowindow.setContent("<H3>"+header+"</H3>"+content);
   infowindow.open(map, marker);
   })
  }
 
 </script> 
 
 </body>
 </html>[/CODE]

@xelawhoOct 02.2012 — #... although I just noticed that you can attach the file directly, which simplifies things even further... :o

[CODE]
 <!DOCTYPE html>
 <html> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 <title>Google Maps Multiple Markers</title> 
 <script src="http://maps.google.com/maps/api/js?sensor=false" 
 type="text/javascript"></script>
 <script type="text/javascript" src="http://artectodesignstudios.com/RSSData.txt"></script> 

 </head> 
 <body>
 <div id="map" style="width: 800px; height: 600px;"></div>
 <script>
 
  var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 10,
   center: new google.maps.LatLng(42.28, 20.20),
   mapTypeId: google.maps.MapTypeId.ROADMAP
  });
 
  var infowindow = new google.maps.InfoWindow();
 
  var stories=data.value.items;
  for (var i = 0; i < stories.length; i++) { 
   var pos= new google.maps.LatLng(stories[i]["geo:lat"], stories[i]["geo:long"]);
   var header=stories[i].title;
   var content=stories[i].description;
   makeMarker(pos,header,content);
   }
 
 
 
   function makeMarker(pos,header,content){
   var marker = new google.maps.Marker({
   position:pos,
   map: map
   });
 
   google.maps.event.addListener(marker, 'click', function() {
   infowindow.setContent("<H3>"+header+"</H3>"+content);
   infowindow.open(map, marker);
   })
  }
 
 </script> 
 
 </body>
 </html>
 [/CODE]

@Jerrell_BauthorOct 02.2012 — #That did the trick!!! It works perfectly. Thank You. I'm going to play around with the code a bit see if i can get this running using jQuery and JSONP ( haven't much experience with JSONP either). When i get it successfully running i will post the result. Thanks again. ?

@xelawhoOct 02.2012 — #I'm going to play around with the code a bit see if i can get this running using jQuery and JSONP [/QUOTE]
well, if you want to, but like I said above, all you have to do is include this in the head:
[CODE] <script type="text/javascript" src="http://artectodesignstudios.com/RSSData.txt"></script> [/CODE]
and the data's all there, ready to use...

Also in #JavaScript _↴

Form Field Values Help Javascript HELP!Changing color / contents of textbox when onFocus

Success!

Help @Jerrell_B spread the word by sharing this article on Twitter...

Tweet This

Populating Google Map V3 InfoWindow(s) with RSS info

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Populating Google Map V3 InfoWindow(s) with RSS info

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴