Google Maps and the MarkerClusterer solution

Hi everyone,

today I’ll be writing a small post about a problem that most people who write maps application deal with: add thousands of markers in you map. A known solution to manage your marker is GMarkerManager. However, today I read about the MarkerClusterer solution in GeoGoogleDevelopers Blog.

“MarkerClusterer collects markers into different clusters and displays the number of markers in each cluster with a label, creating new clusters as the map zoom level changes. The clustering algorithm is simple; for each new marker it sees, it either puts it inside a pre-existing cluster, or it creates a new cluster if the marker doesn’t lie within the bounds of any current cluster.”

The effect of using MarkerClusterer is shown in the picture below and library’s sample site:

The library works like magic. You just have to pass your array of markers to the MarkerClusterer constructor, and it ill take care of the rest. First, we have to import the MarkerClusterer JavaScript implementation file. Later, we create some markers, push into the array and call MarkerClusterer, as shown in the code snippet below.

It’s really awesome and straightfoward. Try it yourself.

See you,

–
Fernando

Google Maps API: Rendering GPolylines and GSteps

Hello everybody,

due to the success of the last 2 posts (here and here) related to ASP.NET and Google Maps API, I decided to dedicated one more post to this topic. Today, we are going to work on GRoute, GPolyline and GStep objects for creating customized maps. Maybe you are going to say that this objects was already covered by others posts, however we will use a different approach. Instead of rendering google result and instructions automatically, we are going to do this by ourselves. That’s how it works.

First of all, I will start with an application similar to that created in later posts. So, we have a map, 2 text fields and a button. After the button ‘onclick’ event, the route is displayed on the map and the instructions on the left panel, as shown the picture below:

Note that the map route and the driving directions were rendered just like magic. All you have to do is passing the map’s and panel’s container to the GDirections constructor and the API works for you. Here is the code used:

Unfortunately, you want to customize the directions result or to change route markers, just like the project that I’m working on in the last months. How use this kind of approach? The first thing is using the deafult GDirections constructor, and do not pass any parameters for it. This will avoid your map and direction’s panel from being populated. Later, you will need to include two options in GDirections.load() function: getPolyline and getSteps. Here is how the new rederPolyline function looks like.

Now, the result comes with all route’s data. For printing driving directions you should use GDirections.getRoute(i) and GRoute.getStep(i) functions, which return each single direction. For printing the route on the map, you should use GDirection.getPolyline() and GMap2.addOverlay(polyline) functions. Here is my default implementation just to demonstrate the use of the API.

In this piece of code I created a ‘ul’ element and added each direction as a new ‘li’ element and add new markers to the map ilustrating route’s origin and destination. The result is shown below:

Now it’s up to you. Use your hability and imagination for creating customized and personal maps.
For more information about the Google Maps API, visit Google Maps API Documentation.

See you.

–
Fernando

Google Maps API Library for GWT

Hello everybody,

2009 starts with a very good news for Java web developers interested in Google Maps services. This week, the Google Geo Developers Blog published about the announcement of  the Google API Libraries for Google Web Toolkit. They’re a collection of libraries that provide Java language bindings for popular Google JavaScript APIs, facilitating its use with GWT, which translates your Java code into JavaScript for deployment to end users.

In short, this library provides a way to access the Google Maps API from a GWT project without having to write additional JavaScript code. Here is how it happens:

public class SimpleMaps implements EntryPoint {
  private MapWidget map;

  // GWT module entry point method.
  public void onModuleLoad() {
    LatLng cawkerCity = LatLng.newInstance(39.509,-98.434);
    // Open a map centered on Cawker City, KS USA

    map = new MapWidget(cawkerCity, 2);
    map.setSize("500px", "300px");

    // Add some controls for the zoom level
    map.addControl(new LargeMapControl());

    // Add a marker
    map.addOverlay(new Marker(cawkerCity));

    // Add an info window to highlight a point of interest
    map.getInfoWindow().open(map.getCenter(),
        new InfoWindowContent("World's Largest Ball of Sisal Twine"));

    // Add the map to the HTML host page
    RootPanel.get("mapsTutorial").add(map);
  }
}

For more informations, the library comes with online examples and a straitforward tutorial.

See you.

–
Fernando

ASP.NET and Google Maps – part 2

Hi,

in the last post, we talked about how to integrate an ASP.NET application with google maps. But, we didn’t do anything interesting at all. Today, I will show some features of the google maps API so your application can be more funny. What about an application that show how to people arrive in your home from anywhere? So, let’s do it now.

First off all, you will need to find the latitude and longitute of your home. For that, use the permalink of http://maps.google.com. There you can search for coordinates and use them in your javascript code. For example, after a search for my address I got the follow URL when click on Link option:

http://maps.google.com/maps?f=q&hl=pt-BR&geocode=&q=R.+General+Luis+Mallet,+Recife&sll=-8.126297,-34.905066&sspn=0.009644,0.013819&ie=UTF8&ll=-8.126212,-34.904251&spn=0.009644,0.013819&t=h&z=16&iwloc=addr

So, as you can see, my home is located on (-8.126212,-34.904251), so I used this valued to set the center of my map with the funtion setCenter(point, zoom?). To add a reference to your home, let’s use a map marker. You will need to create a marker in a specific point with the marker constructor GMarker(point) and add the marker in the map with the function addOverlay(marker). After this operations your javascript will be like that:

Now, if you compile and run you application, you will see the marker over your home on map.

All right, now let’s create the ASP.NET controllers that your friends will use to type their address. I will use that a Labe, a TextBox and a Button. So, after that my form will be like this:

Because we are calling a javascript function,  I’ve allready set the button click event using OnClientClick. In this function we will have to:

1. Get the textfield value;
2. Create a new google directions object;
3. Use the function directions.load() to return a route from your friend’s address to yours.

The searchRoute function is shown below:

Here, we use the ClientID property to get the server control identifier generated by ASP.NET. All we have to do later is to create a string in the format from: Source to: Destination and call the function directions.load(). Notice that I’m using my coordinates as destination, so in your case, just use yours.

Because every ASP.NET control sends a PostBack to the server, we will have to use some Ajax to view the result. If we don’t use Ajax, the page will be reloaded (and also the map since the function load() well be called to our form). To prevent that, we just have to use a ScriptManner and an UpdatePanel, which will make that just a part of the page is reloaded after the button click event.

Our new <body> is show belown:

If it’s still not working, remember to type the whole address, with city, country, etc.

Today we talked about more google maps API features and created a simple application that shows how to arrive to you home from anywhere.  To learn more about google maps and its API take a look at google maps API documentation.

See you.

–
Fernando

ASP.NET and Google Maps

Hi,

last moth I was little busy with graduation thesis’ activities, so I could not give such attention to the blog. But, I’ll try to write as soon as I have some time. Today, I’ll talk about how to create an ASP.NET application that integrates with google maps. This has been my work on Inove for the last two moths and it’s quite interesting. Let’s start.

First, let’s create our Web application in Visual Studio by clicking on File -> New Project… and choosing a new ASP.NET Web Application, as shown in figure below:

Later, run the project with F5 and copy your start page URL. With your web site URL, sign up for a google maps API key here. You just need to agree with the term and conditions, and paste your web site URL inside the tex box. Now, copy the javascript content of the given html and paste it into the head tag of your .aspx file. . Now, your head tag will be similar to the code show below.

In line 15, we create a new instance of google maps, passing the <div> tag which contains the maps. In line 16 we set where the map will be center on and the map zoom. Fell free to change this values.

Now, to visualize the map, will need two things:

1. The map is supposed to be in a separate <div> tag. If you take a look at the javascript code, you will see something like document.getElementById(“map”). So, what you have to do is to create a new <div> tag, inside de body, which id property is “map”.
2. You will need to call the function load(), so the map can be loaded. To do that, just use onload event in the <body> tag, passing the function load() as value.

After that, your <body> will look like this:

Notice that a use a style to set the size of the map.

Now, all that you have to do is to compile and run your project by pressing F5.
Very easy, don’t you think?

So, in this post I talked about how to integrate an ASP.NET application with google maps. In the next posts, I’ll talk more about this integration by addin markers, controllers and some functions.

See you in the next post

–
Fernando

Secure Gmail

Hi,

few weeks ago, I told you about Gmail and Remote Sign Out.

Today, the good news is for those who worries about secure navigation. If you are one of them, it’s time to change some gmail default options. Now, you are able to configure your gmail account to use always HTTPS  protocol.

Using an https: URL indicates that HTTP is used with a different default TCP port (443) and an additional encryption/authentication layer between the HTTP and TCP. This system provides authentication and encrypted communication and is widely used on the World Wide Web for security-sensitive communication such as payment transactions and corporate logons.

To get a secure gmail experience, you just need to click on Settings and mark the option Always use https, as shown in the picture below.

It’s done!

–
Fernando