Display pointers on Google Map from JSON
===

I'm attempting to build an application that using the Google Maps API will allow me to request a users location and once received query a database and pull back 10 records that are within say 10 miles of the users location.

These 10 records will appear on the map as custom pointers showing the users avatar and the title of the record and can be clicked to view the record. 

An example of the returned JSON would be:

    {
        "id": "10",
        "title": "This is an example",
        "href": "http:\/\/website.com\/posts\/This_is_an_example-10",
        "location": {
            "latitude": "53.396432",
            "longitude": "-1.494141"
        },
        "author": {
            "name": "John Doe",
            "avatar": "http:\/\/2.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60?s=132&d=wavatar"
        }
    },
    {
        "id": "320",
        "title": "This is another example",
        "href": "http:\/\/website.com\/posts\/This_is_another_example-320",
        "location": {
            "latitude": "53.396432",
            "longitude": "-1.494141"
        },
        "author": {
            "name": "John Doe",
            "avatar": "http:\/\/2.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60?s=132&d=wavatar"
        }
    }

And the current implementation of the Google Map is as follows:

    <script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script>
        
            var map;
           
            function initialize() {
            	
                var myOptions = {
                    zoom: 15,
                    panControl: false,
                    zoomControl: true,
                    zoomControlOptions: {
                        style: google.maps.ZoomControlStyle.SMALL
                    },
                    mapTypeControl: false,
                    scaleControl: false,
                    streetViewControl: false,
                    overviewMapControl: false,
                    center: new google.maps.LatLng(-34.397, 150.644),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
           
                map = new google.maps.Map(document.getElementById('map'), myOptions);
           
                if (navigator.geolocation)
                {
                	$('.map-notice').fadeOut().remove();
                	
                    navigator.geolocation.getCurrentPosition(function (position)
                    {
                        var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                        
                        var image = 'http://dl.dropbox.com/u/1597153/marker.png';
                        var marker = new google.maps.Marker({
                       		animation: google.maps.Animation.DROP,
                            position: pos,
                            map: map,
                            icon: image
                        });
           
                        marker.setMap(map);
           
                        var image = 'http://dl.dropbox.com/u/1597153/pin-white.png';
                        var marker = new google.maps.Marker({
                        	animation: google.maps.Animation.DROP,
                            position: pos,
                            map: map,
                            icon: image
                        });
                        marker.setMap(map);
           
           				// Center the map on the position passed from Geolocation
                        map.setCenter(pos);
                    },
                    function()
                    {
                        handleNoGeolocation(true);
                    });
                }
                else
                {
                    handleNoGeolocation(false);
                }
            }
           
            function handleNoGeolocation(errorFlag)
            {
                if (errorFlag)
                {
                    //alert('Error: The Geolocation service failed.');
                     $('.no-geo').fadeIn();
                }
                else
                {
                    alert('Error: Your browser doesn\'t support geolocation.');
                }
            }
           
            google.maps.event.addDomListener(window, 'load', initialize);   
            
        </script>
        
        <div class="home-map">						
        	<div class="map-container">
        		<div class="TopLeft"></div>
        		<div class="TopRight"></div>
        		<div id="map" style="width:620px;height:778px;"></div>
        		<div class="BottomLeft"></div>
        		<div class="BottomRight"></div>
        	</div>
        	<div class="map-notice">
        		<span>Getting your current location</span>
        	</div>
        	<div class="no-geo" style="display:none;">
        		<p>Geolocation has been disabled...</p>
        	</div>
        </div>
        <!-- // home-map -->

The purpose of this question **IS NOT** to do the request on the database based on the current location. I will be doing this at a later date.

What I hope to achieve is build the styling using the static JSON content above so I can get that part working first and then do the more complex bits afterwards. Can anyone help?

I have managed to get the pin to appear on the map where the CURRENT user is, but need to replicate the same code to show the records in the JSON feed. An example of how it could look is below based on Foursquare...

So instead of beer picture, it would be the user avatar and say in the box next to it on hover: `John Doe asked This is an example` and would be clickable to the url passed in the href part of the JSON.

![enter image description here][1]

Hopefully someone can help me get in the right direction to show those two JSON items on the map thanks. I have Fiddle here to work with: http://jsfiddle.net/eGFCb/


  [1]: http://i.stack.imgur.com/wHXJn.png