Why does not Google Map in User control not working for multiple instances

Question

4.00/5 (1 vote)

See more:

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.GetType(), "FunctionCall", "initialize();")

Everything 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

Posted 10-Feb-11 18:15pm

Anirudha24.d

Updated 10-Feb-11 18:20pm

TweakBird

v2

Add a Solution

Comments

TweakBird 11-Feb-11 0:25am

Edited for code blocks. Removed unnecessary <pre> tag.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

TheyCallMeMrJames · Answer 1 · 2011-02-11T04:12:00

By what you've posted it looks like all instances would have the same ID.

You'll need to have different IDs and make each call separately (or in a loop).

Alternatively, you could give them a fake class and 'each' them with jQuery. If your class was called map-canvas-placeholder you'd do something like this:

$(".map-canvas-placeholder").each(function(){
   var currentCanvas = $(this);
   // a this point you'd be able to work with currentCanvas
   // and make the init calls required
});

Whatever function you stick the block above in, that's what you'd call from the code behind.

A Google search on multiple google maps would also yield results.

Cheers.

Albin Abel · Answer 2 · 2011-02-11T07:34:00

Hi
In this Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), "FunctionCall", "initialize();") the key should be unique for each user control.

You may do like this

Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), this.FindControl(this.map_canvas.ID).ClientID, "initialize();")

Why does not Google Map in User control not working for multiple instances

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0