SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict TegSkywalker's Avatar
    Join Date
    Nov 2001
    Location
    USA
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting custom markers with jQuery and Google Maps API

    I was reading a jQuery and Google Maps tutorial at http://marcgrabanski.com/article/jqu...utorial-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:

    Code:
        $(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());
            }
        });

  2. #2
    SitePoint Addict TegSkywalker's Avatar
    Join Date
    Nov 2001
    Location
    USA
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    57 views and no idea?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •