This project is read-only.

JavaScript funtion for marker's Index & Title

Sep 21, 2009 at 10:34 AM

Hey Velio

I would like to know if you can  Help me please

Let say my map have a 10 markers...

1)how I would like to click on a maker and let a javavescrpt function place  that specific clicked  maker's index value in a textbox....,

2)and also a javascript to place that clicked Maker's Title value (toolbox) inside a textbox....(all the makers will have different Titles)...my plan is to use these 2 new values from the javascript as part of my sql statement....Please Can you help me with the javascript fucntion.....Please!

Kind Regards

Jake

Sep 22, 2009 at 2:07 PM

Can anyone help me please...Im stuck untill I get this to work..Please

Sep 23, 2009 at 7:12 AM

Hi Jake,

In the older version the marker event where set per marker.
Then I decide to make a more generic way to set handlers for markers in one place, not setting handlers per every marker.
However I see now you problem and in your case would be nice you add JS function as handler to every marker with a specific agruments.
So, maybe in next release, whatever it is, I will make available to way to add marker handlers: 
1) in generic way for all the markers (MarkerEvents)
2) per every marker, like the older versions, and that overrides the generic handlers if any set.

However, you have a way to achieve what you want.
The idea is when event is fired in the JS function to cycle in all the markers and find the proper one, by comparing the lat/lng with received point ones.

Here is a code sample how that should be:

<artem:GoogleMap ID="GoogleMap1" runat="server" Width="634px" Height="600px" Latitude="42.1229"
    Longitude="24.7879" Zoom="4" EnableScrollWheelZoom="true" OnClientClick="addMarker">
    <Markers>
        <artem:GoogleMarker Latitude="42.1229" Longitude="24.7879" Title="Marker1"
            Text="Text of marker 1" Draggable="true">
        </artem:GoogleMarker>
        <artem:GoogleMarker Latitude="42.1229" Longitude="20." Title="Marker2"
            Text="Text of </b>marker</b> 2" Draggable="true">
        </artem:GoogleMarker>
    </Markers>
    <MarkerEvents OnClientClick="showInfoWindow" />
</artem:GoogleMap>
<script type="text/javascript">

    function showInfoWindow(point) {
        var index;
        var title;
        var marker;
        for (index in GoogleMap1.Markers) {
            marker = GoogleMap1.Markers[index];
            if (marker.Latitude == point.lat() && marker.Longitude == point.lng()) {
                title = marker.Title;
                break;
            }
        }

        alert("Index: " + index + ", Title: " + title);
    }
</script>
Now, in the above example, of course, you can do whatever you want with index and title instead of alerting them.
Regards
Sep 24, 2009 at 10:33 AM

Hey Velio

Thank you so much for helping me.....at the end I got this to work thanks to you:)

I think it would be brilliant thing if you can add handlers to the markers , it will definatly make the control even more flexible :) 

I would like to know if you can help me with this javascript you gave me...

How can I get these values into server side textboxes instead of alerting them?

so far I have this

 

<script type="text/javascript">

    function showInfoWindow(point) {
        var index;
        var title;
        var marker;
        var newZoom = GoogleMap1.GMap.getZoom();
        for (index in GoogleMap1.Markers) {
            marker = GoogleMap1.Markers[index];
            if (marker.Latitude == point.lat() && marker.Longitude == point.lng()) {
                title = marker.Title;
                break;
            }
        }

    
        
         var el = document.getElementById('Index');
            el.value = index
            el = document.getElementById('Title');
            el.value = title
         el = document.getElementById('Zoom');
            el.value = newZoom
        var el = document.getElementById('lat');
            el.value = point.lat();
            el = document.getElementById('lng');
            el.value = point.lng();
   
    }
</script>

 

ok then I have html input labels.....but how to I get them in server side textboxes any ideas how to change the javascript?

Thank you for your time and advise,I really appreciate this :)

Regards

Jake

Sep 24, 2009 at 6:08 PM

I got this to work :)

<script type="text/javascript">

    function showInfoWindow(point) {
        var index;
        var title;
        var marker;
        var newZoom = GoogleMap1.GMap.getZoom();
        for (index in GoogleMap1.Markers) {
            marker = GoogleMap1.Markers[index];
            if (marker.Latitude == point.lat() && marker.Longitude == point.lng()) {
                title = marker.Title;
                break;
            }
        }

                
      var el = document.getElementById("<%=Index.ClientID%>");
        el.value = index
            el = document.getElementById("<%=aTitle.ClientID%>");
            el.value = title
         el = document.getElementById("<%=Zoom.ClientID%>");
            el.value = newZoom
        var el = document.getElementById("<%=lat.ClientID%>");
            el.value = point.lat();
            el = document.getElementById("<%=lng.ClientID%>");
            el.value = point.lng();
 
    }
</script>


    <asp:TextBox ID="Index" runat="server"></asp:TextBox>
    <asp:TextBox ID="Zoom" runat="server"></asp:TextBox>
    <asp:TextBox ID="lat" runat="server"></asp:TextBox>
    <asp:TextBox ID="lng" runat="server"></asp:TextBox>
   
    <asp:TextBox ID="aTitle" runat="server"></asp:TextBox>

thank you again for your help on this Velio...thank you ...thank you ....thank you :-)

Regards

Jake

Mar 29, 2010 at 9:57 AM

HI Can somebody help me ! I have Markers in GoogleMap Control.When I click on Marker I use the Click Event Serverside to get Latitude and Longtitude but it's not work.