CODEWITHSUNDEEP
javascriptgoogle-mapssvg
Dan Popouţanu
Dan Popouţanu

Reputation: 43

Adding google maps inside Svg

I have a framework that is based on svg so anything added inside needs to be inside an svg.

I am trying to add a google maps right now but to no success. In order to add the google maps i try creating a div element with id "map" that i later use inside the google maps to assign a map.

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

In order to make my div I use foreignobject where i only define width and height 

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

The google maps is the most basic code :

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

Upvotes: 2

Views: 262

Answers (1)

Dan Popouţanu
Dan Popouţanu

Reputation: 43

In order for anything to be displayed in Google Maps you need a width and a height. Apparently the way I did it with attributes is not the right way to go. Instead what I should have written was : 

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

Fiddle here

Upvotes: 2

Related Questions