Использование объекта svg в качестве контейнера для карты Google

Поскольку заголовок говорит, что у меня есть объект svg, и я хочу, чтобы этот объект содержал экземпляр карты Google. Я пытался сделать это так же, как обычно, с помощью div или простых элементов, используя Javascript и getElementByID и помещая карту внутри элемента. однако, похоже, это не работает здесь. Я много раз искал, но поскольку Google использует svg для пользовательских значков и наложений, все ответы связаны с этим. Я в основном пробовал разные подходы к тому, где поставить id="map_canvas, но ничего не сработало.Использование объекта svg в качестве контейнера для карты Google

Мой HTML с SVG в качестве объекта:

<div class="row map"> 

<div class="span12"> 

    <object type="image/svg+xml" id="map_canvas" data="assets/map/MA_map.svg"></object> 

</div> 

</div>

Мой JavaScript (это в настоящее время в <head> тег, но я хочу, чтобы переместить его в .js документа):

<script> 
    function initialize() { 
     var mapCanvas = document.getElementById('map_canvas'); 
     var mapOptions = { 
      center: new google.maps.LatLng(44.5403, -78.5463), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(mapCanvas, mapOptions) 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

И наконец, вот что выглядит мой файл svg (созданный в Illustrator):

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg version="1.1" 
id="map_canvas" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 

viewBox="-79.892 94.942 960 599.864" 
enable-background="new -79.892 94.942 960 599.864" 
xml:space="preserve"> 

<filter id="dropshadow" height="130%"> 
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur --> 
<feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset --> 
<feMerge> 
<feMergeNode/> <!-- this contains the offset blurred image --> 
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to --> 
</feMerge> 
</filter> 

<path 
id="map_canvas" 
style="filter:url(#dropshadow)" 

<path //lots of lines of code for the path /> 

</svg>

источник

2014-09-26 eignhpants

Можете ли вы объяснить, чего вы пытаетесь достичь в конечном итоге? Почему вы пытаетесь поместить карту Google в SVG? –

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

Возможные решения, которые вы можете попробовать:

использовать SVG <foreignObject> с <clipPath> или <mask>. Я не уверен, насколько хорошо это будет работать.
Использование маски CSS (http://caniuse.com/#feat=css-masks).
Создайте карты Polygon, которые имеют тот же цвет, что и на заднем плане, и который является размером с карту, и имеет отверстие в форме вашей маски.
Обложка карты <img> (например, PNG), которая имеет тот же цвет или текстуру, что и фон, и имеет отверстие в форме вашей маски.

источник

2014-09-28 01:00:00

Использование объекта svg в качестве контейнера для карты Google

ответ

Смежные вопросы