Click here to Skip to main content
Click here to Skip to main content

How To Show Location of Your Website Visitors on Google Map

By , 22 Apr 2012
Rate this:
Please Sign up or sign in to vote.

Introduction

You can show the location of everyone who is visiting your web page, in three steps:

  1. Find the location of the user
  2. Show Google map
  3. Draw a marker which shows the location of user on Google map

Using the Code

1. Find Location of User

There are many ways to find users' locations based on their IP. This is one of the easiest methods.

<script type="text/javascript" language="JavaScript" 
src="http://j.maxmind.com/app/geoip.js"></script>
<script type="text/javascript">
//Users latitude
geoip_latitude()
//Users longitude
geoip_longitude()
</script>

2. Show Google Map

Showing Google map in a web page can be as easy as this:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function InitializeMap() 
{
    //Specify location of user by his/her latitude and longitude
    var latlng = new google.maps.LatLng(29.627, 52.4858);
    var myOptions = {
        zoom: 3,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
window.onload = InitializeMap;
</script>

The previous code shows a simple Google map without map controls. In the following code, I have used a map with different map controls and also I have used JavaScript code from the first step to specify location of user.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
            var map;
            function initialize() {
                var options =
    {
        zoom: 2,
        center: new google.maps.LatLng(geoip_latitude(), geoip_longitude()),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions:
        {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            poistion: google.maps.ControlPosition.TOP_RIGHT,
            mapTypeIds: [google.maps.MapTypeId.ROADMAP,
              google.maps.MapTypeId.TERRAIN,
              google.maps.MapTypeId.HYBRID,
              google.maps.MapTypeId.SATELLITE]
        },
        navigationControl: true,
        navigationControlOptions:
        {
            style: google.maps.NavigationControlStyle.ZOOM_PAN
        },
        scaleControl: true,
        disableDoubleClickZoom: true,
        draggable: false,
        streetViewControl: true,
        draggableCursor: 'move'
    };</script>

3. Show Location of User by Marker

This code shows a marker on the map which shows the location of user and also adds an information window which you can use to show some information to the user.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type=" language="JavaScript">
        map = new google.maps.Map(document.getElementById("map"), options);
            // Add Marker and Listener
            var latlng = new google.maps.LatLng(geoip_latitude(), geoip_longitude());
            var marker = new google.maps.Marker
        (
            {
                position: latlng,
                map: map,
                title: 'Click me'
            }
        );
               var infowindow = new google.maps.InfoWindow({
                   content: 'You Are Here'
               });
               google.maps.event.addListener(marker, 'click', function () {
                   // Calling the open method of the infoWindow 
                   infowindow.open(map, marker);
              });
</script>            

Combine Three Steps

Now we combine the previous three JavaScript codes together to show a Google map whose center is the location of the user. Also, as you can see, the JavaScript code from the third step has been used to show a marker on map which shows the location of user and if he/she clicks on it, your specified comment will be shown.

<html>
<head>
    <script type="text/javascript" language="JavaScript" src="http://j.maxmind.com/app/geoip.js">
    </script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
</head>
<body>
        <script type="text/javascript">
            var map;
            function initialize() {
                var options =
    {
        zoom: 2,
        center: new google.maps.LatLng(geoip_latitude(), geoip_longitude()),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions:
        {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            poistion: google.maps.ControlPosition.TOP_RIGHT,
            mapTypeIds: [google.maps.MapTypeId.ROADMAP,
              google.maps.MapTypeId.TERRAIN,
              google.maps.MapTypeId.HYBRID,
              google.maps.MapTypeId.SATELLITE]
        },
        navigationControl: true,
        navigationControlOptions:
        {
            style: google.maps.NavigationControlStyle.ZOOM_PAN
        },
        scaleControl: true,
        disableDoubleClickZoom: true,
        draggable: false,
        streetViewControl: true,
        draggableCursor: 'move'
    };
                map = new google.maps.Map(document.getElementById("map"), options);
                // Add Marker and Listener
                var latlng = new google.maps.LatLng(geoip_latitude(), geoip_longitude());
                var marker = new google.maps.Marker
    (
        {
            position: latlng,
            map: map,
            title: 'Click me'
        }
    );
                var infowindow = new google.maps.InfoWindow({
                    content: 'You Are Here'
                });
                google.maps.event.addListener(marker, 'click', function () {
                    // Calling the open method of the infoWindow 
                    infowindow.open(map, marker);
                });
            }
            window.onload = initialize;
    </script>
    <div id="map" style="height: 600px; width: 800px" />
</body>
</html>

This is the result in the web browser:

License

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

About the Author

MehdiNaseri
Chief Technology Officer National Iranian Oil Company (NIOC)
Iran (Islamic Republic Of) Iran (Islamic Republic Of)
- Timeline of my career focus:
1994: Batch files in Microsoft Dos
1995: GW-Basic, Q Basic
1996: Assembly, C
1999: Pascal, C++
2000: Bachelor of Science Degree in Computer Software Engineering
2001: Borland Delphi, Microsoft SQL Server, HTML
2002: Visual Basic, C--, Ada, Lisp, Prolog, JavaScript
2003: C#, Java
2004: Asp.net, Computer Networks
2005: Master of Science Degree in Computer Software Engineering
2006: Data Mining
2007: XML, XQuery, XSLT
2008: WPF
2009: Silverlight, Network Administration
2010: ASP.NET MVC, JQuery, CSS, Ajax, LINQ, Entity Framework
2011: VMware Visualization (vSphere, vCenter)
2012: Microsoft SharePoint, Microsoft System Center, Microsoft Visualization (Hyper-V), Microsoft Exchange Server, Microsoft Lync, Windows 8 App
2013: Cloud Computing (VMware and Microsoft Hyper-V), Microsoft Project Server.
2014: ???

Comments and Discussions

 
QuestionI never understood!!! PinmemberCaldasGSM22-Apr-12 23:12 
AnswerRe: I never understood!!! PinmemberJohn Brett25-Apr-12 2:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 23 Apr 2012
Article Copyright 2012 by MehdiNaseri
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid