Click here to Skip to main content
12,765,176 members (37,774 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


14 bookmarked
Posted 22 Apr 2012

How To Show Location of Your Website Visitors on Google Map

, 22 Apr 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
How to show location of your website visitors on Google map based on their IP addresses


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" 

2. Show Google Map

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

<script type="text/javascript" src=""></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=""></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=""></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.

    <script type="text/javascript" language="JavaScript" src="">
    <script type="text/javascript" src="">
        <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,
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            poistion: google.maps.ControlPosition.TOP_RIGHT,
            mapTypeIds: [google.maps.MapTypeId.ROADMAP,
        navigationControl: true,
            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 
          , marker);
            window.onload = initialize;
    <div id="map" style="height: 600px; width: 800px" />

This is the result in the web browser:


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


About the Author

Software Developer (Senior) National Iranian Oil Company (NIOC)
Iran (Islamic Republic of) Iran (Islamic Republic of)

  • PMI-ACP (PMI Agile Certified Practitioner)

  • PMP (Project Management Professional)

  • MCSD (Microsoft Certified Solutions Developer): App Builder

  • MCSD (Microsoft Certified Solutions Developer): Web Applications

  • MCSA (Microsoft Certified Solutions Associate): Web Applications - Charter Member

  • MCP (Microsoft Certified Professional)

  • Microsoft Specialist: Programming in HTML5 with JavaScript and CSS3

  • MTA (Microsoft Technology Associate)

  • CIW Advanced HTML5 & CSS3 Specialist - Exam 1D0-620

  • CIW Site Development Associate

  • PSM (Professional Scrum Master)

  • PSPO (Professional Scrum Product Owner)

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:, 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),
2014: Agile, Scrum
2015: Project Management
2016: Security, Android Development

You may also be interested in...


Comments and Discussions

QuestionVisitor Location Pin
Member 1194054827-Aug-15 6:06
memberMember 1194054827-Aug-15 6:06 
Questionquestion about multiple pin Pin
Member 1080300322-Jul-14 1:54
memberMember 1080300322-Jul-14 1:54 
AnswerRe: question about multiple pin Pin
MehdiNaseri23-Jul-14 12:05
memberMehdiNaseri23-Jul-14 12:05 
QuestionI never understood!!! Pin
CaldasGSM23-Apr-12 0:12
memberCaldasGSM23-Apr-12 0:12 
AnswerRe: I never understood!!! Pin
John Brett25-Apr-12 3:34
memberJohn Brett25-Apr-12 3:34 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 23 Apr 2012
Article Copyright 2012 by MehdiNaseri
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid