Latest

random

Google Maps API v3 Custom Styling InfoWindow with CSS Effect

Styling InfoWindow Box with CSS Effect Google Maps

An InfoWindow displays content (usually text or images) in a popup window to a marker above the map at a given location. Generally 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.
Styling InfoWindow with Effect Google Maps - CSS
InfoBox - google-maps-utility-library-v3
I found a plugin / utility library for the Google Maps API v3, called InfoBubble.js. It does a great job at making it easy to have highly customized Info Window. In the following example I will show you how to display infowindow using Css, and InfoBubble.js library. Find the html code below:-

Default.aspx
<%@ 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>InfoBubble - Display Styling InfoWindow with Effect Google Maps</title>

    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" />
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></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">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="">Click Here</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">
        <a href="#" onclick="RemoveMarkerPlace();">Remove</a>
        <br />
        <br />
        <div id="map-canvas" style="width: 700px; height: 600px;"></div>
    </form>
</body>
</html

InfoBubble.css
 .InfoWindow_TableOuter {
          color: #454545;
          font-family: Arial, Helvetica, sans-serif !important;
          font-size: 12px;
    min-width: 150px!important;
    display: block!important;
}
.InfoWindow_TableOuter tr td {
          vertical-align: middle;
}

.InfoWindowHead {
          padding:5px 0px 2px;
    font-family: Arial, Helvetica, sans-serif !important;
          font-size: 12px !important;
          font-weight: bold !important;
          display: block;
          color: #454545;
}
.InfoWindowTitle{
          padding:5px 0px 2px;
    font-family: Arial, Helvetica, sans-serif !important;
          font-size: 13px !important;
          font-weight: bold !important;
          display: block;
          color:#121a76;
    text-decoration: underline !important;
}
.InfoWindowHead a {
     font-family: Arial, Helvetica, sans-serif !important;
    margin: 0px;
          padding: 5px 10px 5px 10px;
          color: #666;
          background-color: #f3f3f3 !important;
          border: 1px solid #dcdcdc !important;
          float: right;
          text-decoration: none;
          display: block;
          cursor: pointer;
          font-weight: bold;
}
.InfoWindowHead a:hover {font-family: Arial, Helvetica, sans-serif !important;
    margin: 0px;
          padding: 5px 10px 5px 10px;
          float: right;
          text-decoration: none;
          display: block;
          cursor: pointer;
          font-weight: bold !important;

    background-color: #dddddd !important;
          border: 1px solid #cccccc;
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
          color: #333 !important;
}

.InfoWindowText {
    font-family: Arial, Helvetica, sans-serif !important;
          font-size:12px;
          color: #454545;
}
I hope you will enjoy the web gis development tip while programming with Google Maps JavaScript API v3. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome. 

Also If you like this article, don't forget to share this article with your friends and colleagues.

No comments:

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.