Query and Google Maps Tutorial 1 Basics. There are many times I want to leverage j. Querys strengths to create a custom Google Maps mashup. In this tutorial, I will walk you through how to get started using j. Query inside the Google Maps environment. I will assume nothing, and explain each piece in detail. Nuts Uk 16 September 2011 Maps' title='Nuts Uk 16 September 2011 Maps' />The European Union is the second largest economy in the world if treated as a single country in nominal terms and according to purchasing power parity PPP. Getting started using jQuery with the Google Maps API. A Bushcraft Survival Kit. Photo Paul Kirtley Having been given a copy of John Lofty Wisemans SAS Survival Handbook when I was 13 years old, I spent a. SharpKeys is a Registry hack that is used to make certain keys on a keyboard act like other keys. For example, if you accidentally hit Caps Lock often, you could use. Here is a collection of baby play ideas and activities for 6 to 18 month olds to inspire curiosity, problem solving and good old fashioned play times. Gmail is email thats intuitive, efficient, and useful. GB of storage, less spam, and mobile access. In case you havent heard of it, Nibiru is a totally nuts idea. Yet it gets many people very scared. I started to get messages about it as a result of. View Final Demo. If you are already familiar with Google Maps API, skip to step 5, or so. Step 1 Get API key. First, grab yourself an API key for Google Maps, you will need this in the next step. Step 2 Load Google Maps and j. Query. We want to load up j. Query and Google Maps with the Google AJAX Libraries API. YOURAPIKEYHERE lt scripttypetextjavascriptcharsetutf 8 google. Alarm Clock Program In Vb. Make sure to replace YOURAPIKEYHERE with your API key. By using the Google AJAX Libraries API, it allows you to load the Java. Script libraries you need right from Googles servers. This increases the chance that your users will be able to load the scripts faster from their browser cache, as well as shuffle the j. Query script loading off your server. Step 3 Create the Google Map. To create our Google Map, we need to create a container div and use CSS to give it a width and a height. Use the GMap. 2 function to make a map instance. Then, set the center of the map. I wrapped this code block in j. Querys document ready function so that the code is run after the page has loaded. GMap. 2document. Element. By. Idmap. MN new GLat. Lng4. Centerburnsville. MN,8 Here, I used Burnsville, MNs latitude and longitude because it is where I live right now. There are many ways to get the latitude and longitude of an address, like this simple service by i. Touch. Map. The second parameter for set. Center is the zoom level, which is a number. I set the zoom level to8here because it is about in the middle. At this point we should have a simple map. Step 4 Load the Google Maps Example. To have some points to work with, lets paste in the google maps example. Bounds var south. West bounds. get. South. West var north. East bounds. get. North. East var lng. Span north. East. West. lng var lat. Span north. East. West. lat var markers forvar i 0 ilt 1. GLat. Lngsouth. West. Span Math. random, south. West. lng lng. Span ath. GMarkerpoint. map. Overlaymarker. markersi marker codelt p. Note that I added a markers array to the example code. This will be used in the next step. Step 5 Loop Through Markers and Add Basic Click Event to Markerslt h. In this step, we start to use j. Query and Google Maps together. We want to be careful to use Google Maps built inlt span classcaps APIlt span as much as possible, leaving j. Query only for what it is best at. Full. Screen lt param valuealways nameallowscriptaccess lt embed width4. Lets take that array of markers and loop through them with lt a hrefhttp docs. Utilitiesj. Query. Querys each methodlt a. GEvent. add. Listenermarker,click,function. Tomarker. get. Lat. Lng. Inside the loop, lets use Google Mapss GEvent namespace to attach a click event to each marker. Then, we will add a pan. To behavior to center the map on the marker. Lat. Lng returns the latitude and longitude of the marker, while map. ToGLat. Lng allows us to center the map on that latitude and longitude. Step 6 Make a Clickable List of Markers. Lets add a clickable list next to the map. Insert a ul. Then lets style it up a bit by floating the map left and float our list element next to it. We also want to add a hover effect to the list items to give visual feedback to the user that they can click on each item in the list. In our j. Query each loop from last step, lets append the clickable list items to the list. Pointi. clickfunction. Tomarker. get. Lat. Lng. append. Tolist Here I am just setting the content toPoint the count, adding that same pan. To action from before, then appending the list item to our list. Step 7 Add a Custom Message. When I create a Google Maps mashup, I usually want to replace the built in info window with something custom. With j. Query, we can add any arbitrary HTML in place of the info window. This is great when you want complete control over what the info window looks like. Add a message div with some test text. Test text. lt div Then add some basic styling to the message. We have to place the message div inside the map. To do this, we can use j. Query to append it to an object. The map view is seperated into panes. Each pane is a div layered on top of the other. To get the div object that we want to attach our message div to, we can use map. PanePANE. The GMAPFLOATSHADOWPANE is the layer that I find works best for attaching custom messages. Tomap. get. PaneGMAPFLOATSHADOWPANE To show the message div in place of the info window, we need to separate the click action into a separate function. Replace the map. pan. Tomarker. get. Lat. Lng with display. Pointmarker, i, a call to the new display. Point function shown below. Pointmarker, i. Tomarker. Point. Offset map. Lat. Lng. To. Div. Pixelmarker. get. Point. message. Offset. Offset. x We put the pan. To action in our new function. Then the magic function here is the map. Lat. Lng. To. Div. PixelGLat. Lng which converts the latitudelongitude of the marker into a pixel on the map div. This returns aobject containing x amount of pixels from the left of the map and y amount of pixels from the top of the map. Final Step 8 Add Some Spice. To finish up, we will add an event when the map stops panning. We can do this by attaching themovendevent map object. This way, after panning to the marker youve clicked on we can use j. Querys fade. In method to add some spice. Pointmarker, index. End GEvent. add. Listenermap,moveend,function. Mr Potato Head Card Game. Offset map. from. Lat. Lng. To. Div. Pixelmarker. get. Lat. Lng. message. In. css top marker. Offset. y, left marker. Offset. x. GEvent. Listenermove. End. Tomarker. get. Lat. Lng There you have it. Weve come a long ways by adding our own custom click event, a clickable list and a custom info window. In the next tutorial, Ill show you how to store and retrieve points with a server side language.