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

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

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

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 maps — это самый простой код :

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

Скрипка здесь

1 ответ

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

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

    Скрипка здесь