Google maps widget


#1

Hi everyone i was trying to send a message to my users with a location widget.

In js fiddle i have made an example of what i want to achieve: http://jsfiddle.net/q876od34/

in my renderer i have the following code:

 const locationFormatted = ` \r\n ${location.map(({ lat,lng }) =>
     `
  <iframe 
    width="300" 
    height="300" 
    frameborder="0" 
    scrolling="no" 
    marginheight="0" 
    marginwidth="0" 
    src="https://maps.google.com/maps?q=${lat},${lng}&hl=es;z=14&amp;output=embed"
   >
   </iframe>
`
   ).join('\r\n')}
`;

but i can only see a square with a white backdrop when i inspect the element i get:

width="300"
height="300"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
src="https://maps.google.com/maps?q=51.6038656,4.7959702&hl=es;z=14&output=embed"
>
</iframe>

does anybody have any tips or things i can try it would be very much appreciated.


#2

Do you mean that opening tag is missing?


#3

no i mean that the map doesn’t render


#4

should i wrap the iframe in a div ?


#5

Found a Fix posted for future use in renderer.js :
const locationFormatted = ` \r\n ${location.map(({ lat,lng }) =>

&lt;iframe src="https://maps.google.com/maps?q=${lat},${lng}&amp;hl=es;z=14&amp;output=embed"&gt;&lt;/iframe&gt;
).join(’’)}
`;

This renders a google maps widget