Building an advanced interactive marker

The next step in our social map project is to add more details for our Twitter search result. We would like to open up an information panel automatically when the Twitter result comes in. In the process, we will create a subclass of Google Marker and extend it and add a new InfoWindow to enable us to add live HTML data right into our map.

Getting ready

It will be really hard to join in, if you haven't started from the start of this chapter. As this recipe is in continuation of the previous recipe, we will not create a new HTML file or a new JavaScript file but will instead continue from where we left off.

How to do it...

Grab your latest JavaScript file and let's continue to the next steps:

1. In the function showTweet, replace the new marker with a new TwitterMarker marker.

   function showTweet(obj,latLng){
         if(!obj) obj = {text:'No tweet found in this area for this topic'};
         console.log(obj);	
   
         var marker = new TwitterMarker({
               map...