Skip to main content

Different map for a different browser!

            The title simply implies that detect the client's browser and then display the map accordingly! This is basically important when you are developing a map application for mobiles. Mobiles usually have a small screen and the maps that look brilliant on the desktops don't look the same on the mobile screens!

            Well, in my example, I am considering only two of the most popular browsers in use - Mozilla and IE. The application detects whether the client's browser is one of the two and then renders the map accordingly! If you are viewing the example in Mozilla, then you will see a 600 X 800px map, whereas if you are viewing it in IE, you will see a smaller 500 X 500px map! Here is the code...

<html>
<title>Basic Google Map Example - Detect browser and render map accordingly
</title>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
function load()
{
    var useragent = navigator.userAgent;
    map = new google.maps.Map(document.getElementById("map_area"),
    {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(21.698265,79.035645)
    });
    if (useragent.indexOf('MSIE') != -1)
    {
        map_area.style.height = '500px';
        map_area.style.width = '500px';
    }
    else if (useragent.indexOf('Mozilla') != -1)
    {
        map_area.style.height = '600px';
        map_area.style.width = '800px';
    }
}
</script>
</head>
<body onload="load()">
<div id="map_area">
</div>
</body>
</html>

             The key focus point in this code is "navigator.userAgent". This detects the type, version, etc. of the current browser being used! The output of the above code will appear as seen in the images below!

Output - Browser used IE

 Output - Browser used Mozilla

            Please try on other browsers as well. Please leave a comment about the results you observe. Hope you like the post. Please leave your feedback here!
Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

Retriving co-ordinates...

         We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first example we have displayed the co-ordinates in the information window and in the second , we have displayed the co-ordinates in a form in the information window.         Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code. <html> <head> <title> Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using event as a parameter to a function declare map, strictly as a global variable fun...
5 comments
Read more

Google Street View Image API

    Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look.     Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views. ...
1 comment
Read more

Jquery Mobile - Basic Listview

    Continuing with the Jquery Mobile Examples, today we will take a look at the listviews in Jquery Mobile. Listviews are popularly used in websites and web-applications that are built on the Jquery Mobile platform and hence we will look at the various list patterns available with Jquery Mobile. Lists are used for a various purposes like data display, navigation, result lists and data entry. We will start with the most basic listview example and look through several examples over a number of posts.     A listview is simply an unordered list containing linked list items with a data-role="listview" attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly listview with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an Ajax request for the URL in the link, create the new pag...
Post a Comment
Read more

Jquery Mobile - Listview with data-inset property

    In the previous post we looked at a basic example of the jQuery Mobile listview. The listview in jQuery Mobile stretches 100% of the width with sharp edges and straight corners. If you wish to have rounded corners for your lists you need to make use of the data-inset="true" property.     Lets take a look at the example below. The lists as seen in the result below have rounded corners as opposed to the straight edges in the example in the previous post, where we had not made use of the data-inset property. When we say that we did not use the data-inset property, we mean that the value of data-inset property is "false". UPDATE: The following example makes use of the next stable version of Jquery Mobile 1.3.1     Hope you have followed the post. Do let me know your feedback on the same and drop your commenets below.
Post a Comment
Read more

Jquery Mobile Form - Search input

    Input field of type search is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the search input type with capsule-corners and adds a 'x' icon to the right end, which clears the text in the search box.      The seacrch input elements are available in 2 flavors/sizes - regular and mini.   Adding a data attribute data-mini="true" to the input tag renders a smaller sized input element. Let's take a look at the code sample below to understand the working in a better way.      In the code above, you will see 4 different implementations of the input search element. The first one is a regular input of type search with the label and the searchbox one below the other. The second implementation is exactly similar to the first implementation with the only difference of the added data attrib...
Post a Comment
Read more