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!

Comments

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...

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. ...

Playing with the markers and info window bubbles...

In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase! So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life! The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .

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.

CSS Text and Font

In this post today, we will take a look at some of the most interesting CSS text and font properties listed below. text-transform white-space word-break word-spacing word-wrap font-variant Text-transform property: Let's begin with the text-transform property. The filler text used in all the examples below has been taken from Andy Matthew's filler text generator which is a humorous replacement to the traditional boring lorem ipsum . The text-transform property will turn your text to uppercase, lowercase and also will capitalize the first character of every word. So now you don't need any javascript to do your bidding. This transformation will be done irrespective of the special characters preceding and following the text characters. The following example will make things much more clear and editable of course =) White-space property: The next property to explore is the white-space proper...

The UI Dev

Search This Blog