Карта Google в пользовательском элементе управления не работает для нескольких экземпляров

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 ();")

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

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

Answer 1

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

Answer 2

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