Добавление карт google в Svg

Question

У меня есть фреймворк, основанный на svg, поэтому все, что добавлено внутри, должно находиться внутри svg.

Я пытаюсь добавить карты Google прямо сейчас, но безуспешно. Чтобы добавить карты Google, я пытаюсь создать элемент div с идентификатором «map», который позже я использую на картах google, чтобы назначить карту.

var div = fo.append('xhtml:div') 
      .attr('width',500) 
      .attr('height',512) 
      .attr('id','map'); 

Для того, чтобы сделать мой DIV я использую foreignobject, где я только определить ширину и высоту

var fo = svg.append('foreignObject') 
      .attr('x',10) 
      .attr('y',10) 
      .attr('width', 500) 
      .attr('height', 512); 

Карт Google является наиболее основной код:

function initialize() 
{ 
var myLatLng = new google.maps.LatLng(28.617161,77.208111); 
var map = new google.maps.Map(document.getElementById("map"), 
{ 
    zoom: 10, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var marker = new google.maps.Marker(
{ 
    position: myLatLng, 
    map: map, 
}); 
} 
initialize(); 

Fiddle here

Answer 1

Для того, чтобы что-либо отображалось на Картах Google, вам нужна ширина и высота. По-видимому, способ, которым я это делал с атрибутами, - не правильный путь. Вместо того, что я должен был бы написать было:

var div = fo.append('xhtml:div') 
      .attr('style','width:500px;height:512px;') 
      .attr('id','map'); 

Fiddle here