Google Map в User control не работает для множественных экземпляров

Question

Я создал пользовательский элемент управления, который содержит карту google. код в пользовательский элемент управления выглядит следующим образом

<script type="text/javascript" language="javascript"> 
var map; 
function 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> 

Зов Initialize() функция из кода позади (.ascx.cs) с использованием Me.Page.ClientScript.RegisterStartupScript (Me.GetType(), "FunctionCall" , "initialize();")

Everythings отлично работает, когда на родительской странице (страница .aspx) используется один экземпляр для пользовательского элемента управления. Но когда я пытался использовать этот элемент управления несколько раз на странице, отображается только карта для 1-го экземпляра. Но для других случаев он не показывает ничего, кроме пустой

Я хочу, чтобы отобразить Google карты для всех экземпляров пользовательского элемента управления Для еха, когда пользовательский элемент управления используется в 4 раза, 4 карт должны отображаться

Answer 1

Первые я попробую создать уникальный идентификатор для каждого элемента div.

Answer 2

javascript добавит карту только к первому div «map_canvas». Возможно, вам придется использовать jquery и изменить идентификаторы div для этого.