Using google map without width and height

Mehrdad Babaki asked on March 20, 2015 09:24

I want to use Google map in a page but the issue is I have to set width and height when my template is responsive so it doesn't work well when my screen width is small. I was wondering if it was possible to use percent instead of pixel or doing something like that to fulfill this situation.

google map

Recent Answers

Brenden Kehren answered on March 20, 2015 12:17

As with any other responsive site, you can find those classes or elements where the width is set and change them based on your media query. Inspect the rendered html and you'll find where it is set and should then be able to change it. Unfortunately, the property only accepts pixel values.

3 votesVote for this answer Mark as a Correct answer

Charles Matvchuk answered on March 20, 2015 14:58 (last edited on March 20, 2015 15:01)

The way to do this is to copy the web part to a new web part. Open it up in visual studio, remove the requirement for width, then in the web part properties do not make the width required. We serve 500,000+ pages with maps on them and the pages are all responsive and this is the technique we used.

5 votesVote for this answer Mark as a Correct answer

Lucy Hyde-Thomson answered on February 10, 2016 11:49

AS a quick fix without creating a new web part you can just write a macro for the height and width properties based on CurrentBrowser.IsMobileDevice. This doesn't give the same control as cloning the web part and creating your own, but works pretty well.

0 votesVote for this answer Mark as a Correct answer