Custom marker for Direction API

692 views
Skip to first unread message

bardu

unread,
Oct 13, 2011, 7:43:19 PM10/13/11
to google-map...@googlegroups.com
Hi,

I have set suppressMarkers and suppressInfoWIndow to true to not display the default markers and infoWindow of a route. Then I have added my custom markers and infoWindows, as usual, to the map as you can see in the code below. However, no markers show up on the map.

What do I miss?
Thanks.

function initYWPDirectionMap() {
    ywpDirectionsDisplay = new google.maps.DirectionsRenderer({
        draggable: false,
        suppressInfoWindow: true,
        suppressMarkers: true
    });
    var ywpDirOptions = {
        zoom: 5,
        center: new google.maps.LatLng(65.00,-135.00),
        mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: true,
        streetViewControl: false,
        minZoom: 4
    };
    var start;
   
    if ( geoLocation && currentLatitude && currentLongitude ) {
        start = new google.maps.LatLng(currentLatitude, currentLongitude);
       
    }
    else {
        start = new google.maps.LatLng(60.7333, -135.094);
    }
    var end = new google.maps.LatLng(60.87116, -135.3384);
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.TravelMode.DRIVING
    };
    ywpDirectionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionResult = result;
            ywpDirectionsDisplay.setDirections(result);
        }
        else {
            //TODO: handle exception
        }
    });
    // create custom markers
    var markerValues = [{iconUrl: '../resources/images/mapicons/youAreHere.png',
                         title: 'You are here, more or less!'},
                        {iconUrl: '../resources/images/mapicons/ywp.png',
                         title: 'Yukon Wildlife Preserve'}
                       ];
    for ( var i = 0; i < markerValues.length; i++ ) {
        var icon = new google.maps.MarkerImage(markerValues[i].iconUrl,
                    new google.maps.Size(32.0, 37.0),
                    new google.maps.Point(0, 0),
                    new google.maps.Point(16.0, 18.0));
        var shadow = new google.maps.MarkerImage('../resources/images/mapicons/shadow.png',
                    new google.maps.Size(51.0, 37.0),
                    new google.maps.Point(0, 0),
                    new google.maps.Point(16.0, 18.0));
        var marker = new google.maps.Marker({
            position: start,
            map: ywpDirectionsMap,
            icon: icon,
            shadow: shadow,
            title: markerValues[i].title
        });
        addDirectionsInfoWindow(marker);
    }
    ywpDirectionsMap = new google.maps.Map(document.getElementById('dir-gmap'), ywpDirOptions);
    ywpDirectionsDisplay.setMap(ywpDirectionsMap);

}

function addDirectionsInfoWindow(marker) {
    google.maps.event.addListener(marker, 'click', function() {
        directionsInfoWindow.setContent(marker.title);
        directionsInfoWindow.open(ywpDirectionsMap, marker);
    });
}


geoco...@gmail.com

unread,
Oct 13, 2011, 7:45:40 PM10/13/11
to Google Maps JavaScript API v3
On Oct 13, 4:43 pm, bardu <bard...@gmail.com> wrote:
> Hi,
>
> I have set suppressMarkers and suppressInfoWIndow to true to not display the
> default markers and infoWindow of a route. Then I have added my custom
> markers and infoWindows, as usual, to the map as you can see in the code
> below. However, no markers show up on the map.
>
> What do I miss?

A link to the map that shows the problem?

-- Larry

Stephan Bardubitzki

unread,
Oct 13, 2011, 8:02:26 PM10/13/11
to google-map...@googlegroups.com
Just deployed.


This is meant to run on a smart phone, but will demonstrate my issue on a desktop browser too.

Thanks,
Stephan


--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


geoco...@gmail.com

unread,
Oct 13, 2011, 9:28:07 PM10/13/11
to Google Maps JavaScript API v3
On Oct 13, 5:02 pm, Stephan Bardubitzki <bard...@gmail.com> wrote:
> Just deployed.
>
> http://yukonlive.ca/mobile-apps/ywp/gethere.html

Looks to me like your "map" variable isn't defined when you are trying
to add the markers to it.

-- Larry

>
> This is meant to run on a smart phone, but will demonstrate my issue on a
> desktop browser too.
>
> Thanks,
> Stephan
>
> On Thu, Oct 13, 2011 at 4:45 PM, geocode...@gmail.com
> <geocode...@gmail.com>wrote:

Stephan Bardubitzki

unread,
Oct 13, 2011, 10:30:22 PM10/13/11
to google-map...@googlegroups.com
You are right Larry!

Thanks, much appreciated.
Stephan
Reply all
Reply to author
Forward
0 new messages