Setting custom markers with jQuery and Google Maps API

[COLOR=#000000][FONT=Times New Roman][COLOR=#444444][FONT=Segoe UI]I was reading a jQuery and Google Maps tutorial at http://marcgrabanski.com/article/jquery-google-maps-tutorial-basics and I have a few questions:

  1. In the current script, the markers are set to be random within a radius. What would be an easy way to switch from that to using individual markers that I set from latitudes and longitudes? I’m going to be using around 5 way points surrounding an area and can either hard code or throw in some PHP code.

  2. In addition to setting my markers, the navigation is done through generated links like “Point 1”, “Point 2”, and so forth. How would I insert code to replace .html("Point "+i) with something else? I’m guessing to have a main city, have a few towns around it, and the “Point” links are replaced with text I want to use. Probably hard code or use PHP/MySQL to show a zip code or town related to that marker.

Here is a sample of the JavaScript code. I only threw in PHP echo tags for the start lat/long and I have that set:


    $(document).ready(function(){
        var map = new GMap2($("#map").get(0));
        var StartArea = new GLatLng(<?=$latitude?>,<?=$longitude?>);
        map.setCenter(StartArea, 8);
        
        // setup 10 random points
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        var markers = [];
        for (var i = 0; i < 10; i++) {
            var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                southWest.lng() + lngSpan * Math.random());
            marker = new GMarker(point);
            map.addOverlay(marker);
            markers[i] = marker;
        }
        
        $(markers).each(function(i,marker){
            $("<span />")
                .html("Point "+i)
                .click(function(){
                    displayPoint(marker, i);
                })
                .appendTo("#list");
            
            GEvent.addListener(marker, "click", function(){
                displayPoint(marker, i);
            });
        });
        
        $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
        
        function displayPoint(marker, index){
            $("#message").hide();
            
            var moveEnd = GEvent.addListener(map, "moveend", function(){
                var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
                $("#message")
                    .fadeIn()
                    .css({ top:markerOffset.y, left:markerOffset.x });
            
                GEvent.removeListener(moveEnd);
            });
            map.panTo(marker.getLatLng());
        }
    });


[/FONT][/COLOR][/FONT][/COLOR]

57 views and no idea? :frowning: