how to pass dataset of cities to google map api

Question

5.00/5 (1 vote)

See more:

hi expert
Scenario: "Get all the cities from sql server then fatch it in javascrtip in order to pass the cities name into geocoder method for taking the makers on google map"

what i did:
i fatched the cities names from Sql server from webservice and then passed it into javascrtip
web service in aspx page(getting the city name from sql server )

<script type="text/C#" runat="server">

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod()]
    public static string[] GetCitiesbyUser_Extender()
    {
       
        System.Data.DataSet dtst = new System.Data.DataSet();
       

        string ses = HttpContext.Current.Session["UserName"].ToString();
        USTER.Dal.clsSearch clssearch = new USTER.Dal.clsSearch();
        // sp for getting the cities name GetAllCitesByUser
        dtst = clssearch.GetAllCitiesByUser(ses);

        
        string[] cntName = new string[dtst.Tables[0].Rows.Count];
        int i = 0;
        try
        {
            foreach (System.Data.DataRow rdr in dtst.Tables[0].Rows)
            {
                cntName.SetValue(rdr["CityName"].ToString(), i);
                i++;
            }
        }
        catch { }
        finally
        {

        }
        return cntName;
    }
    </Script>

passed the cities name in javascrtip that is currently on button click in alert box

XML

<script type="text/javascript">
            function HandleIT() {


                PageMethods.GetCitiesbyUser_Extender(onSucess, onError);
                // should be the same name of return type in web service cntName 
                function onSucess(cntName) {
                    arr = cntName;
                    alert(arr.join('\n'));
                }
</script>
// button click event in body that will handle this function HandleIT
<asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="HandleIT(); return false;"/>

when i click on this button i will get all the cities in alert box plz download the image below
Image

hope you have seen the image in which i am getting cities are actually the array, i want to convert that array into single string and then pass this cities name one by one from the geocoder method of google map v3 api, the geocoder basically converting the city name into latitude and longitude,
plz see the code of geocoder below

C#

<script type="text/javascript">
        var map;
        var geocoder;
        function initialize() {

            var latlng = new google.maps.LatLng(39.91, 116.38);
            var myOptions =
        {
            zoom: 6,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };
            map = new google.maps.Map(document.getElementById("map"), myOptions);
                geocoder = new google.maps.Geocoder();

//                PageMethods.GetCitiesbyUser_Extender(onSucess, onError);
//                            function onSucess(cntName) {

//                                    alert(cntName.join('\n'));
//                                        }
                var address = 'Lahore';
                geocoder.geocode({ 'address': address},
                    function (results, status) {

                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location
                            });

                        }
                        else {
                            alert("Geocode was not successful for the following reason: " + status);
                        }

                    });
        }
        window.onload = initialize;

</script>
// div in page body with id="map" which will show the map on page
<div id ="map" style="width:600px;height:400px;"></div>

The map will only show the city "Lahore" with marker because it`s hard coded yet, now how to convert cities array into single string and pass it one by one from geocoder method in order to get markers on map?

Posted 14-Nov-12 1:59am

anglo0072

Add a Solution

Comments

Herman<T>.Instance 14-Nov-12 8:20am

make it a json string

anglo0072 14-Nov-12 9:12am

no i cant because i think i also have to give the latitude and longitude in json string like this
var Mydata = { "count": 10785236,
"photos": [{"photo_id": 27932, "photo_title": "Atardecer en Embalse", "photo_url": "http://www.mywebsite.com/photo/27932", "photo_file_url": "http://www.mysite.com/mw-panoramio/photos/medium/27932.jpg", "longitude": -64.404945, "latitude": -32.202924, "width": 500, "height": 375, "upload_date": "25 June 2006", "owner_id": 4483, "owner_name": "Miguel Coranti", "owner_url": "http://www.mywebsite.com/user/4483"}
so have to put the latitude and longitude also in json string and there is no latitude and longitude defined with city name in DataBase that`s why i want geocoder will do it`s job to find the lat and long by giving just the city name

2 solutions

Solution 1

Hi

Use the Google Geo-location API

Read this article to get the ins and outs. https://developers.google.com/maps/documentation/geocoding/[^]

Jacques

Posted 15-Nov-12 0:43am

Jacques Loubser

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

anglo0072 · Accepted Answer · 2012-11-23T12:18:00

i have solved by my self

C#

// Create this function for passing the values which was taken by webservice
        function onSucess(cntName){
        // loop through the cntName to pass the individual City one by one from geocode
            for (i = 0; i < cntName.length; ++i) {
                   //for  fixing the issue use closure to localize the cntName[i] variable before passing into geocode and callback function within it.
                (function CreateMarkAndInfo(address) {
                    geocoder.geocode({ 'address': address },
                        function (results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                places[i] = results[0].geometry.location;

                                var marker = new google.maps.Marker({
                                    position: places[i],
                                    title: results[0].formatted_address,
                                    map: map,
                                    icon: iconimage
                                });

                                markers.push(marker);
                                mc.addMarker(marker);
                                google.maps.event.addListener(marker, 'click', function () {
                                    if (!infowindow) {
                                        infowindow = new google.maps.InfoWindow();
                                    }

                                    // Setting the content of the InfoWindow afterward
                                    infowindow.setContent(popup_content[i]);

                                    // Tying the InfoWindow to the marker afterward
                                    infowindow.open(map, marker);
                                });

                                // Extending the bounds object with each LatLng
                                bounds.extend(places[i]);

                                // Adjusting the map to new bounding box
                                map.fitBounds(bounds)
                            }
                            else {
                                // if geocode will end the limit then make delay by timer in order to avoid the OVER_QUERY_LIMIT
                                if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                                    setTimeout(function () { CreateMarkAndInfo(address); }, (15)); // here i think i should use better approch but for now it`s ok.
                                }
                                else {
                                    alert("Geocode was not successful for the following reason: " + status);
                                }
                            }
                    });
                })(cntName[i]);// End closure trick
            }
        }
    }
    google.maps.event.addDomListener(window, 'load', InitializeMap);