Skip to main content

Show your Current Location in Google Maps using ASP.NET C# website and Google Maps API





















Descriptions:

  • Add this script tag inside <Head> section "
  • <script type="text/javascript"
  • src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByJmQq7PkPaznZUFsH7AesFNUz82U8iOc&sensor=false">
  • </script>"
  • Inside this Script add your own Key value  [
  • key=AIzaSyByJmQq7PkPaznZUFsH7AesFNUz82U8iOc]  from Google Code https://code.google.com/apis/console/
  • 1. Getting User Location function in Javascript coding
       function success(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var city = position.coords.locality;
        var myLatlng = new google.maps.LatLng(latitude, longitude);
        var myOptions = {
            center: myLatlng,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.SATELLITE
        };
       
       2. Setting Marker in Google Maps

      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var marker = new google.maps.Marker({
            position: myLatlng,
            title: "lat: " + latitude + " long: " + longitude
        });
        marker.setMap(map);
        var infowindow = new google.maps.InfoWindow({ content: "<b>User Address</b><br/> Latitude:" + latitude + "<br /> Longitude:" + longitude + "" });
        infowindow.open(map, marker);

      3. Geolocation to get Location , and calling the Javascript function

    
if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success);
    } else {
        alert("Geo Location is not supported on your current browser!");
    }

   4. Load Google Maps inside map_canvas Div ID in Body Section of ASPX page
  

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



Default.aspx Page

Comments

Post a Comment

Share this to your friends

Popular posts from this blog

Java Swing MySql JDBC: insert data into database

Program import javax.swing.*; import java.awt.*; import java.awt.event.*; import java.sql.*; public class insertswing implements ActionListener {   JFrame fr;JPanel po;   JLabel l1,l2,main;   JTextField tf1,tf2;   GridBagConstraints gbc;   GridBagLayout go;   JButton ok,exit; public insertswing(){ fr=new JFrame("New User Data "); Font f=new Font("Verdana",Font.BOLD,24); po=new JPanel(); fr.getContentPane().add(po); fr.setVisible(true); fr.setSize(1024,768); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); po.setBackground(Color.WHITE); go=new GridBagLayout(); gbc=new GridBagConstraints(); po.setLayout(go); main=new JLabel("Enter User Details "); main.setFont(f); l1=new JLabel("Name  :");tf1=new JTextField(20); l2=new JLabel("User Name  :");tf2=new JTextField(20); ok=new JButton("Accept"); exit=new JButton("Exit"); gbc.anchor=GridBagConstraints.NORTH;gbc.gridx=5;gbc.gridy=0; go.s...

JSP and Servlet Form Submission without page refresh show results on the same page using Jquery AJAX

Code Snippet HTML Form  <form id='ajaxform' name='ajaxform' action='ajaxformexample' method='post'>  First Name: <input type='text' id='firstname' name='firstname' size='30' required/><br/>  Last Name: <input type='text' id='lastname' name='lastname' size='30'required/><br/>  Email:  <input type='email' id='emailid' name='emailid' size='30'required/><br/>  Password:  <input type='password' id='pwd' name='pwd' size='30'required/><br/>  <input type='Submit'/>   <div id='content'> </div> </form> the above HTML Form uses post method and url servlet redirect to " ajaxformexample " Javascript Code  var form = $('#ajaxform'); // id of form tag  form.submit(function () {  $.ajax({  ...

Guidewire Related Interview Question and answers part 1

common Guidewire questions and answers 20 Guidewire BC Q&A Top 100 Guidewire Interview FAQ Guidewire Claimcenter 20 Interview Questions Guidewire Rating concepts