google maps infowindow style close button

Keywords | google maps infowindow style v3, google maps infowindow example, google maps infowindow style close button, google maps infowindow style rounded corners

Google Maps InfoWindow Style

An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. Typically you will attach an info window to a marker, but you can also attach an info window to a specific latitude/longitude, as described in the section on adding an info window below. You can attach an info window by instantiating the google.maps.InfoWindow class. It has the following properties.

  • Content: You can pass your content in String format using this option.
  • position: Choose the position of the info window using this option.
  • maxWidth: By default, the info window’s width will be stretched till the text is wrapped. By specifying maxWidth, we can restrict the size of the info window horizontally

Google Maps InfoWindow Style Close Button, Rounded Corners

The following google maps infowindow example will demonstrate how to add google maps infowindow style close button and round corners. Here I am sharing a google maps unity called InfoBubble.js. It does a great job at making it easy to have highly customized Info Window. Find the google maps infowindow example source code below:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Google maps infowindow style</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" />
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Your-Key"></script>
    <script src="js/infobubble.js.js"></script>
    <link href="css/InfoBubble.css" rel="stylesheet" />

    <script type="text/javascript">

        var pMarker = []; // Array for markers
        var infoBubbleSample;

        function initialize() {
            var myLatlng = new google.maps.LatLng(18.976347, 72.84399); // default location
            var mapOptions = {
                zoom: 12,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP // Map Type
            }
            infoBubbleSample = new InfoBubble();

            var div = document.createElement('DIV');
            div.innerHTML = '<table class="InfoWindow_TableOuter"><tr> <td><span class="InfoWindowTitle" >Information</span> </td></tr><tr> <td><span class="InfoWindowHead" >Name: </span> </td></tr><tr><td><span class="InfoWindowText">Ravi Kumar</span> </td>   </tr> <tr><td><span class="InfoWindowHead" >Designation: </span> </td></tr><tr> <td><span class="InfoWindowText">Lead Software Engineer</span> </td></tr><tr><td><span class="InfoWindowHead" >Address: </span> </td></tr><tr><td><span class="InfoWindowText">Byculla, Mumbai</span> </td></tr> <tr> <td><span class="InfoWindowHead" ><a  onclick="RemoveMarkerPlace();">Close</a></span> </td></tr></table>';

            infoBubbleSample.addTab('Information', div);
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            // To add marker
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Mumbai, Maharashtra'
            });

            pMarker.push(marker);

            google.maps.event.addListener(marker, 'click', function () {
                if (!infoBubbleSample.isOpen()) {
                    infoBubbleSample.open(map, marker);
                }
            });
        }

        // To remove marker and infobubble
        function RemoveMarkerPlace() {

            for (var i in pMarker)
                // pMarker[i].setMap(null);

                if (infoBubbleSample.isOpen()) {
                    infoBubbleSample.close();
                }
        }

    </script>
</head>

<body onload="initialize()">
    <form id="form1" runat="server">
        <h2>Google Maps InfoWindow Style Close Button with Round Corners</h2>
        <div id="map-canvas" style="width: auto; height: 500px;"></div>
    </form>
</body>
</html>

Download Code

What do you think?

I hope you liked this article on Google Maps Infowindow Style. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

LEAVE A REPLY

Please enter your comment!
Please enter your name here