Question

I’m working on an application that shows the position of vehicles based on the signals the GPS device sends. I have a gridview in ASP.Net that displays that info based on parameters using stored procedures and then populating the gridview with:

DataSetTableAdapters.sp_GetPositionTableAdapter gp = new DataSetTableAdapters.sp_GetPositionTableAdapter
gridview.DataSource=  gp.GetData(parameters)

The columns are: Time of arrival, Address, Position (Latitude, Longitude). But instead of displaying the position like this >> “32.546750000000000, -116.947848333333000”, I would like to show an icon that redirects to the google map page with the position of the vehicle marked. Or maybe display a pop-up.

What is the best way to do this?

Thanks in advance.

Answer 1

The easiest way to to output anchor tag with href=’http://maps.google.com/maps?q=32.546750000000000, -116.947848333333000′

The best way would be to learn how to use the Google Maps API and create a Marker on the map at the proper location.

Simple example:

<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<style type="text/css">
    #map_canvas { height: 100%; }
    @media print {
        html, body { height: auto; }
        #map_canvas { height: 650px; }
    }
</style>

<script type="text/javascript">
function initialize() {
    var myLatlng =
        new google.maps.LatLng(32.546750000000000, -116.947848333333000);
    var myOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        position: myLatLng, 
        map: map,
        title: "Hello World!"
    });
}

if (window.addEventListener) { // W3C standard
    window.addEventListener('load', initialize, false); // NB **not** 'onload'
}
else if (window.attachEvent) { // Microsoft
    window.attachEvent('onload', initialize);
} 
</script>

<div id="map_canvas" style="height: 400px; width: 800px;"></div>