Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
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
<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
<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
Comments
digimanus at 14-Nov-12 8:20am
   
make it a json string
anglo0072 at 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
Rate this: bad
good
Please Sign up or sign in to vote.

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
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

i have solved by my self
 
// 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);
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 369
1 Maciej Los 208
2 George Jonsson 144
3 Richard MacCutchan 140
4 Dave Kreskowiak 130


Advertise | Privacy | Mobile
Web03 | 2.8.140709.1 | Last Updated 23 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid