Question

Ok, I am working on a project where an end user will click on a link within a grid that will open a new window. (.aspx page) I have been researching on how to create a google map from the newly opened .aspx page with out writing a bunch of dynamic javascript in the code behind and then registering the clientscript to the page. I have done this in the past but it really isn’t pretty and is really cumbersome if you ever need to come back and change things.

The initial version of this map will have a route with multiple points present, a later version of this will provide the ability to have multiple routes within the same map (just to give you an overview of what the end goal is) An example would be a route with points LA to Vegas to Austin.

So, I know this is a very general/vague question, but what I am trying to figure out is the best way to generate a google map from a .aspx page without writing dynamic sql, I am sure others have stumbled across this issue previously. Thoughts/Comments, everything is appreciated. Thanks.

Answer 1

There are some components floating around online, but one technique that’s worked well for me is to use a hidden field to hold the address/coordinates/etc., and use the hidden field to populate the map:

<script type="text/javascript">
    var map = null; 
    var geocoder = null;                
    var address = "<%=hdnMapAddress.Value%>";       

    showAddress = function() {
        var mapContainer = $get("<%=pnlMap.ClientID%>");
        if (mapContainer){        
            if (GBrowserIsCompatible()){      
                geocoder = new GClientGeocoder();                      
                map = new GMap2(document.getElementById("<%=pnlMap.ClientID%>"));               
            }                    
            if (geocoder){ 
                geocoder.getLatLng(address, 
                    function(point){                                                                
                        var marker = new GMarker(point);
                        if (marker){
                            map.setCenter(point, 12);                         
                            map.addOverlay(marker);                                                                                                                                                                                                                                                                                                                                               
                        }                                                              
                    }
                );             
            }              
        }  
    }  
</script>
<asp:HiddenField ID="hdnMapAddress" runat="server" /> 
<asp:Panel ID="pnlMap" runat="server" Height="230">
    <!-- map content -->
</asp:Panel> 

Code-behind:

hdnMapAddress.Value = "123 Test St, Providence, RI 02904";