GoogleMaps extension: How to suppress the route start and end icons ?

Answered
0
1

Hello All.

I am using the GoogleMaps extension to show a route on a map. The AddRoute() shows the route but it has a pin with ‘A’ at the start and a pin with ‘B’ on it at the end. I would like to replace those pins with my own icons. I can use AddMarker() to add my own markers but I can’t get rid of the default ‘A’ and ‘B’ pins. From some non-wisej websites I have found out that there is a ‘suppressMarkers’ option in a DirectionsRenderer object that should stop the default pins appearing. But I can’t work out how to set this option when using the GoogleMaps extension in WiseJ.

Using the Javascript from one of the other websites I am trying to do something like this (in a button event handler):

this.Eval(@”
var mapOptions = {
zoom: 15,
};
map = new google.maps.Map(document.getElementById(‘App.” + this.Name + @”.googleMap1’), mapOptions);
var directionsRenderer = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
directionsRenderer.setMap(map);”);

But I get a ‘Map: Expected mapDiv of type HTMLElement but was passed null’ error message. I don’t know what to pass in to the getElementById call to make this work. Can anyone familiar with Javascript and Wisej help me here please ? In C# my google map control is called googleMap1.

Or maybe I am on the wrong tack trying to do this via Javascript – is there a way of suppressing the default route icons straight from C# ?

Thank you

Andrew

  • You must to post comments
Best Answer
1
1

You are on the right track with using JavaScript and with the ‘suppressMarkers’ option in a DirectionsRenderer object.

Some things to fix with your code:
– Don’t use getElementbyId. There are better ways to get the reference to the Wisej GoogleMaps widget.
Also, you are creating a new map here: map = new google.maps.Map(... You don’t need to create a new map, we can just access the map that already exists within the widget.

– You do this.Eval(... In your code, this is equal to NameSpaceName.Page1. (NameSpaceName depends on what you named your project- it’s probably something like WisejWebApplication1 So, this would be WisejWebApplication1.Page1). Instead of calling Eval from the Page, call it from the googleMap object- which in your case is googleMap1

So your code should look like: googleMap1.Eval(... Now we can access properties inside of the widget- such as the DirectionsRenderer object that already exists inside of the widget. Very handy!

Here is the code snippet you need: (Note: Inside of the Eval statement here, this refers to the widget container, this.map refers to the map inside of the widget.)
googleMap1.Eval("this._directionsRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true}); this._directionsRenderer.setMap(this.map); ");

I’ve attached a sample as well. You will need to add your Google Maps API Key in the designer to get it to work.

-Julie

Attachment
  • Andrew Pearce
    Thank you Julie. Your answer solved my problem. For other people trying this: I found I couldn’t do the googleMap1.Eval(…) call in the _Load method of the form – it just gave a message about google being unknown, have to make this call after _load has finished. Also, if you do ClearRoute() call then add another route you have to run the googleMap1.Eval(…) statement again to stop the icons coming up again.,
  • You must to post comments
0
0

Just a quick note that Wisej.NET 3.2.6 was released today.

Best regards
Frank

  • You must to post comments
1
1

Hi Andrew,

We are going to add a new SuppressMarkers property as an enhancement, and we also fixed the issue you had when clearing and re-adding routes!

This will be part of the next Wisej.NET 3.2.6 release!

Best,
Alaa

  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.