Change the layout of the marker-popup?

Feb 14, 2008 at 8:56 PM
Edited Feb 14, 2008 at 9:03 PM
Hi and thanks for this great GoogleMap Control!

I just have tow questions.

First is it possible to change the layout of the popup that shows up when clicking on a marker?

And is it possible to just show the text of the marker when holding the mouse over the marker?

thanks alot for your help!
Feb 14, 2008 at 9:13 PM

sweddotnet wrote:
And is it possible to just show the text of the marker when holding the mouse over the marker?


I too am interested in the answer to this portion of your question. A travel site called SideStep integrates the Google Map into their site with some very interactive features. Perform a search for hotels, then click on the Map tab. Here is an example of something similar to what I want to do (notice the interactiveness between the search results and the map, the tooltips over the markers, etc.):

http://www.sidestep.com/hotels
Coordinator
Feb 15, 2008 at 7:03 AM
Edited Feb 15, 2008 at 7:32 AM
Hi,
Sure you can, especially after release 2.8 now.
You can attach client-side or server-side code to any google map or google marker event.
Here bellow are quick and simple samples in answer to your questions

Change the layout of the popup that shows up when clicking on a marker

Client-side sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>GoogleMap Control Events Sample</title>
</head>
<body>
 
    <script type="text/javascript">
        var _myInfoWindowVisible = false;
        
        function showMyInfoWindow() {
            var win = document.getElementById('myInfoWindow');
            win.style.display = 'block';
            win.style.left = '100px';
            win.style.top = '100px';
            _myInfoWindowVisible = true
        }    
        
        function hideMyInfoWindow() {
        
            if(_myInfoWindowVisible) {
                var win = document.getElementById('myInfoWindow');
                win.style.display = 'none';                
                _myInfoWindowVisible = false;
            }
        }
        
        
    </script>
    <form id="form1" runat="server">
    <div>
        <artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Zoom="12" Key="ABQIAAAAojJioor-0DqvjrLmqzbsCBSHfJdw_wxpIi7yvLx_S62UleXEFBTZDT_q2dweY6mh547lELAmifIhVg"
            Address="roma italia">
            <Markers>
                <artem:GoogleMarker Address="roma italia" Draggable="true" OnClientClick="showMyInfoWindow()" />
            </Markers>
        </artem:GoogleMap>
        <div id="myInfoWindow" style="background-color: White; position: absolute; border: solid 1px #999; padding: 10px;
            display: none;" onclick="hideMyInfoWindow()">
            This is some custom info window.<br />
            Text here could be provided dynamically by server-side code for example.
        </div>
    </div>
    </form>
</body>
</html>
Server-side sample
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>GoogleMap Control Events Sample</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" AsyncPostBackTimeout="900"
        EnableScriptGlobalization="true" EnableScriptLocalization="true">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server" RenderMode="Block" UpdateMode="Conditional" ID="upn_mappa">
        <ContentTemplate>
            <artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Zoom="5" Key="ABQIAAAAojJioor-0DqvjrLmqzbsCBSHfJdw_wxpIi7yvLx_S62UleXEFBTZDT_q2dweY6mh547lELAmifIhVg"
                Address="wien austria">
                <Markers>
                    <artem:GoogleMarker Address="roma italia" Text="Rome was clicked" OnClick="HandleMarkerClick" />
                    <artem:GoogleMarker Address="wien autria" Text="Wien was clicked" OnClick="HandleMarkerClick" />
                    <artem:GoogleMarker Address="berlin germany" Text="Berlin was clicked" OnClick="HandleMarkerClick" />
                </Markers>
            </artem:GoogleMap>
            <asp:Literal ID="_ltrText" runat="server"></asp:Literal>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>
C# - code behind
protected void HandleMarkerClick(object sender, EventArgs e) {
    GoogleMarker marker = sender as GoogleMarker;
    if (marker != null) {
        _ltrText.Text = marker.Text;
    }
}

Show the text of the marker when holding the mouse over the marker

Client-side
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>GoogleMap Control Events Sample</title>
</head>
<body>
 
    <script type="text/javascript">
        function showInfo(text) {
            var el = document.getElementById('info');
            if(el) el.innerHTML = text;
        }
    </script>
 
    <form id="form1" runat="server">
    <artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Zoom="5" Key="ABQIAAAAojJioor-0DqvjrLmqzbsCBSHfJdw_wxpIi7yvLx_S62UleXEFBTZDT_q2dweY6mh547lELAmifIhVg"
        Address="wien austria">
        <Markers>
            <artem:GoogleMarker Address="roma italia" OnClientMouseOver="showInfo('Rome was pointed')"/>
            <artem:GoogleMarker Address="wien autria" OnClientMouseOver="showInfo('Wien was pointed')"/>
            <artem:GoogleMarker Address="berlin germany" OnClientMouseOver="showInfo('Berlin was pointed')"/>
        </Markers>
    </artem:GoogleMap>
    <div id="info"></div>
    </form>
</body>
</html>

That's in short folks ...
Hope this helps.

Regards
Feb 15, 2008 at 2:12 PM
Thanks velio! That is a perfect answer. Thank you for all that you do. This project is one of my favorite open source projects by far!
Feb 16, 2008 at 3:28 PM
Thanks really much velio!

If I use your first example, how can I get the popup to open up over my marker, and not in the sam spot everytime? Or maybe its easier to just change the layout of the markerpopup in example two where you used UpdatePanel. I just want a clean white popup, but I can't find out how to change the css.

Thanks again!
Coordinator
Feb 16, 2008 at 4:50 PM
Edited Feb 16, 2008 at 4:50 PM
Hi,
I have just published release 2.8.2.
There GoogleMarker has property InfoWindowEvent and you can set it to:
  • Click
  • DoubleClick
  • MouseDown
  • MouseOut
  • MouseOver
  • MouseUp

That's it.
Nothing more you have to do now, just set InfoWindowEvent to MouseOver and the standard info window will appear on mouse over instead on click.

Regards
Feb 16, 2008 at 6:27 PM
Yes, thanks but that's the problem I don't want the "standard info window". I want my own style on the popup (with another background-color, no rounder corners and so on) And I also want it to appear over my marker just like the "standard info window" do. Is this possible?

Thanks for taking your time looking in to this!
Feb 18, 2008 at 9:56 AM
I can't figure this out, what I want is just like the example that hismightiness posted. When a user hold the mouse over a marker I want to show a clean popup with my own style on that position.

To see more exakt check this link and click map:
http://www.sidestep.com/s/hotels.jsp?completed=true&searchid=tiuVwz9ioB3IPrTlOD0p

Can I do this?
Coordinator
Feb 18, 2008 at 11:01 AM
Hi,
Sure you can.
I'll post a sample tonight.

Regards
Feb 18, 2008 at 2:08 PM
That's perfect, thanks really much!
Coordinator
Feb 18, 2008 at 6:32 PM
Edited Feb 18, 2008 at 6:38 PM
Hi,
Here is simple code sample of how basically you can your custom info window.
The idea is same like the example above, in addition just gets the current mouse posission fro window.event.
You can apply a desired style to the div used to show the info, I'm just setting border and backgroung color light gray.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>GoogleMap Control - Markers</title>
</head>
<body>
 
    <script type="text/javascript">
        var _myInfoWindowVisible = false;
        
        function showMyInfoWindow() {
            var e = window.event;
            var win = document.getElementById('__infoWindow');
            win.style.display = 'block';
            win.style.left = e.clientX + 'px';
            win.style.top = e.clientY + 'px';
            _myInfoWindowVisible = true;
        }    
        
        function hideMyInfoWindow() {
        
            if(_myInfoWindowVisible) {
                var win = document.getElementById('__infoWindow');
                win.style.display = 'none';                
                _myInfoWindowVisible = false;
            }
        }
    </script>
 
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" AsyncPostBackTimeout="900"
        EnableScriptGlobalization="true" EnableScriptLocalization="true">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server" RenderMode="Block" UpdateMode="Conditional" ID="upn_mappa">
        <ContentTemplate>
            <artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Zoom="12" Key="ABQIAAAAojJioor-0DqvjrLmqzbsCBSHfJdw_wxpIi7yvLx_S62UleXEFBTZDT_q2dweY6mh547lELAmifIhVg"
                Address="roma italia">
                <Markers>
                    <artem:GoogleMarker Address="roma italia" Draggable="true" OnClientMouseOver="showMyInfoWindow()"/>
                </Markers>
            </artem:GoogleMap>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div id="__infoWindow" style="background-color: White; position: absolute; border: solid 1px #888; background-color: #CCC; color: #F00; padding: 10px; display: none;"
        onclick="hideMyInfoWindow()">
        This is some custom info window.<br />
        Text here could be provided dynamically by server-side code for example.
    </div>
    </form>
</body>
</html>

Hope this helps.
Regards
Feb 19, 2008 at 3:47 PM
Edited Feb 19, 2008 at 5:34 PM
Thanks alot velio! It works in IE!

But something isn't right. In firefox I get javascript error in showMyInfoWindow: "e has no properties". How can I get position in firefox?
Coordinator
Feb 20, 2008 at 5:58 AM
Hi,
I see.
Then try next in first line function showMyInfoWindow():
var e = (event) ? event : window.event;
or shorter as:
var e = event || window.event;

Regards
Feb 20, 2008 at 12:34 PM
Strange that didn't work either. I get this error: "event is not defined", isn't event sent as a parameter in firefox? I call my function like this: "showMyInfoWindow()" What am I doing wrong? Does it work for you?
Coordinator
Feb 20, 2008 at 3:59 PM
Hi,
Sorry. Yes, it works only in IE.
The problem here is on mouse over is fired by google map api javascript code and doesn't sent any params to that function.
Even for other events it rather sent lat and lng, location etc. params then the event and client point .
So, I have no clue for solving that ussue so far.
Only I can figure out is:
  • You check on server code what kind of browser is invoking the page and the show you custom window or if FF to attach standard window on mouse over as shown above in this discuttion.
  • Implement a javascript function which gets the the location (in pixels) of the google map element and then calculate a location inside thet element where you want to show your custom window - left:top, center, bottom:right etc.

That's what I can fugure out, but you can look up on the net if there is better solution.
If you have found, please, do not forget to share it with us :).

Regards
Feb 20, 2008 at 8:20 PM
Hi again!

I made some research and found a solution that might work but that not is the best way.

var posx;var posy;
function getMouse(e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//IE:Moz
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
posx=ev.clientX+document.body.scrollLeft;
posy=ev.clientY+document.body.scrollTop;
}
else{return false}//old browsers

}

var _myInfoWindowVisible = false;
function showMyInfoWindow() {
var win = document.getElementById('__infoWindow');
win.style.display = 'block';
win.style.left = posx + 'px';
win.style.top = posy + 'px';
_myInfoWindowVisible = true;
}

function hideMyInfoWindow() {

if(_myInfoWindowVisible) {
var win = document.getElementById('__infoWindow');
win.style.display = 'none';
_myInfoWindowVisible = false;
}
}


Then I added:
document.onmousemove=getMouse

So I get the position all the time, its not a good solution, as the javascript is running all the time.


Maybe it can be interesting to add oppurtunity to set cssclass on the popup from the marker in later releases?

Coordinator
Feb 20, 2008 at 9:01 PM
Hi
I will consider that.
Still in future release has to come functionality of adding overlays and controls like overlays and then I'll dive deeply in that part of the google maps api functionality.

Regards
Feb 20, 2008 at 10:26 PM
Sounds great!

Just one more question, then I will stop disturbing you! ;)

Can I disable the marker so even if the user clicks it no popup will show?

Thanks again!
Sep 23, 2009 at 6:13 AM

Hi,

  Have you got the solution for the previous post. I am also surfing for the same issue. Can you please help me..

Thanks a lot...