How to redirect to another page when clicked on Marker in Google Maps V3

prontone...

SOLVED CLOSED ACTIVE ANSWERED
User: prontonet
Posted: on Jul 18, 2014 06:25 PM
Forum: Social Networking
Answer: 1
Views: 14759

hi,

I have a database table with Lat, Long, City and Url colums

on aspx, i am using google v3 maps with markerCluster enabled to.

the problem i am having is the map loads fine and shows

the clusters. when i click the cluster it zooms to the

markers but then If I click a marker I want it

to redirect to another URL - that corresponds to that

marker in the SQL database - Url Columns

all my code is below

    <link href="Style/PlayMeStyle.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxgEk&sensor=false">
</script>

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>

<script type="text/javascript">



    function initialize() {
        var markers = JSON.parse('<%=ConvertDataTabletoString() %>');

        var pos = new google.maps.LatLng(51.5000, 0.1167);

        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            //  marker:true
        };

        var infowindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);






        var gmarkers = [];
        for (i = 0; i < markers.length; i++)
        
        
         {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var url = data.Url;

            


            var iconBase = 'xxxxxxxxxxx/Images/';

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,


                icon: iconBase + 'electric.png',

                tee: data.Url



            });



  
            gmarkers.push(marker);
        }


google.maps.event.addListener(marker, 'click', function () {
            window.location.href = tee;
        });





        var mcoptions = { zoomOnClick: true, showText: true, averageCenter: true }

        var markerCluster = new MarkerClusterer(map, gmarkers,mcoptions);




    }



    

</script>

code behind

 protected void Page_Load(object sender, EventArgs e)
    {

    }
    // This method is used to convert datatable to json string
    public string ConvertDataTabletoString()
    {

        string v = Request.QueryString["Name"];


        DataTable dt = new DataTable();
        using (SqlConnection con = new SqlConnection("xxxxxxxxxxxxxxxxxxxxxxx"))
        {
            using (SqlCommand cmd = new SqlCommand("select title=City,lat=latitude,lng=longitude, Url FROM PlayMeLocation", con))
            {

                SqlDataAdapter da = new SqlDataAdapter(cmd);



                con.Open();




                da.Fill(dt);
                System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
                List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                Dictionary<string, object> row;
                foreach (DataRow dr in dt.Rows)
                {
                    row = new Dictionary<string, object>();
                    foreach (DataColumn col in dt.Columns)
                    {
                        row.Add(col.ColumnName, dr[col]);
                    }
                    rows.Add(row);
                }
                return serializer.Serialize(rows);
            }
        }
    }
}

Download FREE API for Word, Excel and PDF in ASP.Net

Mudassar

0 1

Reply
ANSWER
User: Mudassar
Replied: on Jul 18, 2014 06:26 PM
Report

I am giving a static example where I have populate the map using array.

When marker is clicked, it redirects to another page and displays the details.

Map Page

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var markers = [
        {
            "title": 'Bombay Hospital',
            "lat": '18.9409388',
            "lng": '72.82819189999998',
            "description": 'Bombay Hospital',
            "Url": 'Details.htm'
        },
        {
            "title": 'Jaslok Hospital',
            "lat": '18.9716956',
            "lng": '72.80991180000001',
            "description": 'Jaslok Hospital',
            "url": 'Details.htm'
        },
        {
            "title": 'Lilavati Hospital',
            "lat": '19.0509488',
            "lng": '72.8285644',
            "description": 'Lilavati Hospital',
            "url": 'Details.htm'
        },
        {
            "title": 'Aksa Beach',
            "lat": '19.1759668',
            "lng": '72.79504659999998',
            "description": 'Aksa Beach',
            "url": 'Details.htm'
        },
        {
            "title": 'Juhu Beach',
            "lat": '19.0883595',
            "lng": '72.82652380000002',
            "description": 'Juhu Beach',
            "url": 'Details.htm'
        },
        {
            "title": 'Girgaum Beach',
            "lat": '18.9542149',
            "lng": '72.81203529999993',
            "description": 'Girgaum Beach',
            "url": 'Details.htm'
        },
        {
            "title": 'Oberoi Mall',
            "lat": '19.1737704',
            "lng": '72.86062400000003',
            "description": 'Oberoi Mall',
            "url": 'Details.htm'
        },
        {
            "title": 'Infinity Mall',
            "lat": '19.1846511',
            "lng": '72.83454899999992',
            "description": 'Infinity Mall',
            "url": 'Details.htm'
        },
        {
            "title": 'Phoenix Mall',
            "lat": '19.0759837',
            "lng": '72.87765590000003',
            "description": 'Phoenix Mall',
            "url": 'Details.htm'
        },
        {
            "title": 'Phoenix Mall',
            "lat": '19.0759837',
            "lng": '72.87765590000003',
            "description": 'Phoenix Mall',
            "url": 'Details.htm'
        },
        {
            "title": 'Hanging Garden',
            "lat": '18.9560279',
            "lng": '72.80538039999999',
            "description": 'Hanging Garden',
            "url": 'Details.htm'
        },
        {
            "title": 'Jijamata Udyan',
            "lat": '18.979006',
            "lng": '72.83388300000001',
            "description": 'Jijamata Udyan',
            "url": 'Details.htm'
        },
        {
            "title": 'Juhu Garden',
            "lat": '19.0839704',
            "lng": '72.83388300000001',
            "description": 'Juhu Garden',
            "url": 'Details.htm'
        },
        {
            "title": 'Sanjay Gandhi National Park',
            "lat": '19.2147067',
            "lng": '72.91062020000004',
            "description": 'Sanjay Gandhi National Park',
            "url": 'Details.htm'
        }
        ];
        window.onload = function () {
            LoadMap();
        }
        function LoadMap() {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
         
            for (var i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title,
                    url: data.url
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        window.location = marker.url + "?lat=" + marker.position.k + "&lon=" + marker.position.B + "&title=" + encodeURIComponent(marker.title);
                    });
                })(marker, data);
                latlngbounds.extend(marker.position);
            }
            var bounds = new google.maps.LatLngBounds();
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);
        }
    </script>
    <div id="dvMap" style="width: 600px; height: 600px">
    </div>
</body>
</html>

Details Page

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        window.onload = function () {
            LoadMap();
        }
        function LoadMap() {
            var params = window.location.href.split('?')[1].split("&");
            var data = {};
            data.lat = params[0].split("=")[1];
            data.lng = params[1].split("=")[1];
            data.title = decodeURIComponent(params[2].split("=")[1]);

            document.getElementById("title").innerHTML = data.title;
            var infoWindow = new google.maps.InfoWindow();
            var mapOptions = {
                center: new google.maps.LatLng(data.lat, data.lng),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(marker.title);
                infoWindow.open(map, marker);
            });
        }
    </script>
    <h3 id = "title"></h3>
    <br />
    <div id="dvMap" style="width: 600px; height: 600px">
    </div>
</body>
</html>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

How to redirect to another page when clicked on Marker in Google Maps V3

Company

Explore

Follow us

Contact Us