jQuery Cheat Sheet

How To Create an Interactive Map with jQuery · Chronicles of Martians In this tutorial, I’m going to show you how to create a jQuery interactive map. We’ll start all the way from the HTML markup, to CSS, and lastly the JavaScript. For those of you that have an addiction to caffeine (like me) I have also included the CoffeeScript version of our JavaScript file. Awesome, huh? Before we start, you can take a sneak peek at the final demo. The HTML Markup Now lets get going. <div id="wrapper"><div id="map_container"><a class="marker" style="top:44%; left:67%;" data-info="iran"></a><div class="info_box"></div><div class="info" id="iran"><h2>Iran Republic - Asia</h2> Lorem ipsum dolor sit amet, mel offendit facilisis cu, per ei detraxit electram temporibus, eu ad </div></div></div> We begin our markup by creating a div with the id wrapper that will be positioned at the center of our page, then inside it we have our map_container div. The next element is the anchor tag with a marker class and some inline CSS position style. Next is the div with the class info_box.