ASP.NET - How to integrate Google Maps in my web site

Asked By Venkatesh Desai on 17-Sep-11 01:42 PM

Hi All,

I am developing web site in that i want to use GOOGLE MAP .Actually my idea is that i want to give 2 textboxes for e.g., Source & Destination if i give locations in That 2 Textboxes then it want to show PATH,DIRECTION,DISTANCE & MINUTES/HOURS  to location in my map.

So anybody please help me for this requirement.

Thanks in Advance,

Venki  Desai.

Suchit shah replied to Venkatesh Desai on 17-Sep-11 01:53 PM

hello, u just need to refer google map documentation u will get each and every help from there.

u just to use geocode facility of google map.geocode convert the address into long-latt which is shown in map.

use below exam where i m doing the same (Please see bold word carefully)...

------------------------------------------------------------------------------------------------------------------------------------------------------------------

<script src='<%= Convert.ToString(ConfigurationManager.AppSettings["GmapKey"]) %>'
      type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
   var map; var geocoder; var xml; var markers; var address; var businessname; var Temp = new Array(); var j;
   var SetCenter1=40.8526;
   var SetCenter2=-73.9142;
      function load() {
        // Create new map object
        map = new GMap2(document.getElementById("map"));
        // Set map center location
        map.setCenter(new GLatLng(SetCenter2, SetCenter1), 12);

        //set
        map.enableScrollWheelZoom();

        // Add Map Controls
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());

        // Create new geocoding object
        geocoder = new GClientGeocoder();
        //markers ="Ahmedabad,Gujarat,India,IN#Pune,Mahrastra,Inida,In";
      markers = markers.split("#"); // this is hold address which is assigned in .cs file
        businessname = businessname.split("#");
        //markers = xml.documentElement.getElementsByTagName("marker");
        j = 0;
        for (var i = 0; i < markers.length; i++) {
          address = markers[i];
          Temp[i] = businessname[i];
          geocoder.getLocations(address, addToMap);
        }
      }

      // This function adds the point to the map
      function addToMap(response) {
        if (!response || response.Status.code != 200) {
          return;
        }
        else {
          place = response.Placemark[0];
          // Retrieve the latitude and longitude
          point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
          var marker_info = new Object();
          //alert(place.Point.coordinates[1]);
          marker_info.point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
          if (marker_info.msg != null)
            marker_info.msg += "<br />" + Temp[j];
          else
            marker_info.msg = Temp[j];
          // Add the marker to map
          map.addOverlay(createMarker(marker_info, Temp[j]));
          j++;
          map.panTo(new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]));
          map.setZoom(10);
        }
      }

      function createMarker(marker_info, html) {

        var titmsg = marker_info.msg;
        var marker = new GMarker(marker_info.point, { title: titmsg });
        if (marker_info.msg && marker_info.msg != '') {
          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
          });
        }
        return marker;
      }
    </script>

---------------------------------------------------------------------------------------------------------------------------------------------------

in above code markers is assigned in cs file as...


Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "mypage", "markers='" + locationOfVendor + "';';load();", true);

and as per documentation provided by google use below to show map in your form...


<div id="map" style="width: 750px; height: 200px;">
</div>



Please also refer the below article for more details

http://blog.evonet.com.au/post/Integrating-Google-Maps-into-an-ASPNET-page.aspx
http://www.dotnetexpertsforum.com/how-to-integrate-google-maps-in-an-asp-net-application-t481.html
http://www.codeproject.com/KB/scripting/Use_of_Google_Map.aspx


I think this is pretty much useful 2 u
dipa ahuja replied to Venkatesh Desai on 17-Sep-11 02:24 PM

Basically, the guys over at http://subgurim.net/ have already done all the hard work in writing the .Net wrapper for Google Maps. Problem is, the examples on their site are mostly in spanish & its a bit difficult to find out exactly what is needed to get everything working.

But all this is cutting into your bragging time - so lets get started!

1. Get a Google Maps API key from here:
http://www.google.com/apis/maps/

2. Download the SubGurim wrapper dll from here:
http://en.googlemaps.subgurim.net/descargar.aspx

3. Unzip it, and put it in your \bin directory

4. Add it to your toolbox by
Tools -> Choose Toolbox Items -> Browse -> Select the .dll file -> OK
GMap will now be in the ‘Standard’ area of your Toolbox.

5. Add a new webpage.

6. Drag the GMap from the toolbox onto the page. A new instance of the GMap will appear on the page, with the name ‘GMap1′

7. Add the following lines to your web.config file:


<appSettings>
 <add key="googlemaps.subgurim.net" value="YourGoogleMapsAPIKeyHere" />
 </appSettings>
8. Add the following code to your Page.Load

protected void Page_Load(object sender, EventArgs e)
{
 string sStreetAddress = null;
 string sMapKey = ConfigurationManager.AppSettings("googlemaps.subgurim.net");
 Subgurim.Controles.GeoCode GeoCode = default(Subgurim.Controles.GeoCode);
  sStreetAddress = "100 Russell St. Melbourne. VIC. 3000. Australia";
 GeoCode = GMap1.geoCodeRequest(sStreetAddress, sMapKey);
 Subgurim.Controles.GLatLng gLatLng = new Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng);
  GMap1.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal);
 Subgurim.Controles.GMarker oMarker = new Subgurim.Controles.GMarker(gLatLng);
 GMap1.addGMarker(oMarker);
}
 
Radhika roy replied to Venkatesh Desai on 17-Sep-11 02:29 PM

1. Search for a location on http://maps.google.com/

2. Specify the map type you want

Choose between the different map views

You may want to use Street View to see a street-level image of the address. Just drag the Pegman icon to the location you want to see.

3. Click on "Link" at the top right corner of the map

Copy and paste to an HTML page to display the map

You can change the size and preview your embedded map here

4. You are done!

The map appears right where you placed the HTML
Uses of a map on your website
  • Show customers a map of your company location
  • Let the world know where your band's next gig is
  • Inform friends of your new address in your blog

For more information on how to use Google Maps, visit our http://maps.google.com/support/.


Plot multiple locations

1. Click on "My Maps" and then "Create a map"

NOTE: You will need to sign in to your Google Account or https://www.google.com/accounts/NewAccount?hl=en&service=local if you don't have one.

2. Click 

Your cursor changes into a placemark icon with an "X" crosshairs. The crosshairs indicate where the placemark will fall. Follow the onscreen instructions to save each placemark.

You can also add a placemark to your My Map by searching for it in Google Maps and clicking "Save to My Maps" in the information window. 

3. Add title and description to your placemark. Then save it by clicking "OK"

4. Repeat steps 2 and 3 as necessary

Too many places to add by hand?

Import your data as KML, KMZ or GeoRSS.

http://maps.google.com/support/bin/static.py?page=guide.cs&guide=21670&topic=21676&answer=144364#import

5. Click on  at the top right corner of the map

The rest of the steps are the same as for "http://maps.google.com/help/maps/getmaps/quick.html#one-location."

Additional options

Example 1: Directions to your business

Why write out directions from various locations when you can give your users door-to-door directions? Embed this gadget in your site to help customers get the exact directions they need.

Go to the http://maps.google.com/help/maps/gadgets/directions/#utm_campaign=en&utm_medium=lp&utm_source=en-lp-na-us-mapslanding to try the gadget out. Then you can customize the gadget with your address and your preferred appearance in the http://www.gmodules.com/ig/creator?synd=open&url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&brand=light.

Get the single line of code and paste it into your HTML page

The gadget will display directions inside your webpage

Example 2: Local Search results

Use the Google Maps search to find businesses in a given area and embed the results on your website. For example, if you own a hotel, you can show residents that there are a lot of restaurants nearby.

Click on "Link" and follow the same steps as when you're plotting a location.


Radhika roy replied to Venkatesh Desai on 17-Sep-11 02:38 PM
Dont know much about it, go to maps.google.com in the map select a desired location. now click on the "link" on the top-right of the map. now copy the code from "Paste HTML to embed in website" option and paste the html code in your webpage. you need to experiment with alignment and other properties.
All the best! If this thing works reply here... All the best once again!

You can embed a simple map, a set of driving directions, a local search, or maps created by other users. Here's how:

  1. Ensure that the map you'd like to embed appears in the current map display.
  2. Click Link to this page in the top-right corner of the map.
  3. In the box that pops up, copy the HTML under 'Paste HTML to embed in website,' and paste it into the source code of your website or blog.

If you'd like to adjust the size of the map before you embed it, just click Customize and preview embedded map, select your preferred size, and take a look at the preview map. Once you're happy with what you see, copy the HTML that appears in the box at the bottom of the window.

Keep in mind that you won't be able to embed Traffic maps and some other Maps features.

For more detailed information on how to add a Google Map to your site, visithttp://maps.google.com/help/maps/getmaps/

smr replied to Venkatesh Desai on 18-Sep-11 01:53 AM
hi

Adding Google Map control to your webpage

  • Open page where you want to insert Google Map.
  • Drag GoogleMapForASPNet.ascx control to your page.



refer for details

http://www.c-sharpcorner.com/uploadfile/shabdarghata/google-maps-user-control-for-asp-net-part103232008234414pm/google-maps-user-control-for-asp-net-part1.aspx

More examples

http://www.eggheadcafe.com/community/aspnet/17/10352300/googlemap.aspx

http://www.eggheadcafe.com/community/aspnet/2/10232500/how-to-use-google-maps-in-our-aspnet-website.aspx

Anoop S replied to Venkatesh Desai on 21-Sep-11 03:05 AM
Just follow steps.

Step 1:
  
    Create a new website >select the programming language as c#> Name the project as GoogleMap

Step 2:

    Now lets go to this site and download the DLL from the Recommended download

    http://googlemap.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=26521

Step 3:

   Now i think that you people have download that ddl.. Now right click on to the website and add reference to arthem.GoogleMap.

Step 4:

   Now add this in the Web.config under Pages tag and under Controls.



Step 5:

    Now go to this site and give your URL in click on Generate API Key.
   
   http://code.google.com/apis/maps/signup.html

    Copy this Key and paste in some document..

Step 6:

   Now add this lines of lines of code in .aspx page

    
    We are using Google Marker to indicate your location. Zoom can be set until 9.


Step 7:

        Now Lets run this application