Why doesn't Google Map in User control work for multtiple instances?

[anirudha d]

Hi,
I have created user control which contains google map .
code in user control is as follows

<script type="text/javascript" language="javascript">
var map;
fucntion intialize(){
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 
        //set the default center
       map.setCenter(myLatlng);
        //set the default zoom
       map.setZoom(initialZoom);
 
        //Set the map type
       map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
}
</script>

HTML code:

<div id="map_canvas" style="float: left; width: 100%; height: 300px; border: solid 1px black;" > </div>

Call to Initialize() function is from code behind(.ascx.cs) using
Me.Page.ClientScript.RegisterStartupScript(Me.GetT ype(), "FunctionCall", "initialize();")

Everythings works fine when single instance for user control is used in parent page (.aspx page).
But when I tried to used this user control multiple times in page ,only map for 1st instance is showing. But for other instances it is not showing anything but blank

I want to display google maps for all instances of the user control
For ex when user control is used 4 times,4 maps should be displayed

Thanks & Regards,
Anirudha Deshpande

[Frinavale]

In HTML, every element (<div>s etc.) must have a unique ID.

So, your HTML is not valid when you have multiple User Controls, each with a <div> that has an ID of "map_canvas". This means that your JavaScript is not going to work (because there are multiple <div> elements with the same ID...so the document.getElementById method won't work).

To fix this, use a Panel.
A Panel is rendered as a <div> element. ASP.NET ensures that each Panel is given a unique Client-ID so that it produces valid HTML.

Now, the trick is knowing what IDs are assigned to the Panels when they are rendered as <div> elements.

You can use the Panel.ClientID property to access the ID that is assigned to the <div> element when the Panel is rendered.

You can either register an Array of ClientIDs with the ScriptManager (or with your page)...or you can register a JavaScript method-call with the ScriptManager/Page that calls the "initialize" JavaScript method....and you can pass the ClientID as a parameter into the "initialize" JavaScript method.

-Frinny

[anirudha d]

Hi frinny,
Thank you very much for the reply.
i tried of taking panel instead of div.but its not working .When I put Runat="Server" ,its giving javascript null object error.

[Frinavale]

It would really help if you posted some code so that I can see what you're doing now.

:)

[NitinSawant]

dude, try this

<script type="text/javascript" language="javascript">
var map_<%=this.ClientID%>;
fucntion intialize_<%=this.ClientID%>(){
  map_<%=this.ClientID%> = new google.maps.Map(document.getElementById("<%=map_canvas.ClientID%>"), mapOptions);
 
        //set the default center
       map_<%=this.ClientID%>.setCenter(myLatlng);
        //set the default zoom
       map_<%=this.ClientID%>.setZoom(initialZoom);
 
        //Set the map type
       map_<%=this.ClientID%>.setMapTypeId(google.maps.MapTypeId.SATELLITE);
}
</script>
 

<div id="map_canvas" runat="server" style="float: left; width: 100%; height: 300px; border: solid 1px black;" > </div>
 

Best of luck,

Regards,
Nitin

[NitinSawant]

don't forget to call the initialize function,

intialize_<%=this.ClientID%>();