Draw lines and points with popup on google maps

I had to draw multiple points on a map from google maps, that represents stations. These points should show some information when clicked, like name etc. Additionally i had to draw a line between two stations, which represents the power cables that connects them. On an web-interface the user can search stations by different criteria, for which then i can fetch the coordinates.

Taggings:

Submitted by Philip Pai on Mon, 12/12/2011 - 19:23
3 answers

Consistent website design using Bootstrap

Bootstrap offers wide range on different components that can be used to get a consistence design.
Bootstrap also offers you the possibility to change your Theme. So you can get a complete different colour- schema with some easy and fast steps
Information about Bootstrap: http://getbootstrap.com

To include Bootstrap into your web application. The developer just downloads the Bootstrap CSS stylesheet and includes a link in the HTML file.
If the developer wants to use the JavaScript components, they must be referenced along with the jQuery library in the HTML document.

a simple example of defining a drop down menu can be viewed in the attachment (DropDown_code_Example.png)
The figure in the attachment presents the presentation of the example before (DropDown_Example.png)

If you would like to customise Bootstrap you can also with this link: http://getbootstrap.com/2.3.2/customize.html
define which components will be included in your style sheet or to change the appearance of your components.

Submitted by Agnes Fröschl on Wed, 12/11/2013 - 21:00

Use a component suite

I had the same problem at my work. If you are able to build the website from scratch you can use a component suite which provides this functionality. For me I found that primefaces covers this requirement pretty good. All possible functionalities and how to use them is shown on their website: http://www.primefaces.org/showcase-labs/ui/gmapHome.jsf

Submitted by Jakob Frohnwieser on Thu, 12/15/2011 - 08:06

Taggings:

Google Maps API Polyline and GMarker

Drawing the lines is easy with the use of the well documented Google Maps JavaScript API.

http://code.google.com/apis/maps/documentation/javascript/overlays.html

For lines i used Polylines "A Polyline object consists of an array of LatLng locations, and creates a series of line segments that connect those locations in an ordered sequence."

So first prepare the coordinates

coordinateArray[pointNr] = new GLatLng(Latitude, Longitude);

and then draw the polyLine on the map

var polyLine = new GPolyline(coordinateArray, color, opacity, weight);
_map.AddOverlay(polyLine)

For creating the stations i used GMarker with a customized GIcon.
The click event for showing additional information is done by adding an GEvent

Simple example:

var marker = new GMarker(point, icon); //point = single GLatLng object
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
});
_map.addOverlay(marker);

the text can contain HTML Tags like links etc.

Submitted by Philip Pai on Mon, 12/12/2011 - 19:40