I am trying to understand this tutorial and I dont understand how can you increase the size of the maps.
For example what If i wanted to my map to fit the div of size 300px by 300px.
Hi,
If you go to the link you gave you will find the live DEMO link.
Open the demo page and view page source.
You will see this comment in the html…
<!-- Custom JS that sets: Zoom, Pointer and Map Type; Change the class name of the <div> where you want the map: current class name is "map-location" -->
They have set the map to be shown in…
<div id="map-location" style="width:100%; height:300px;"></div>
Looks like a little conflict in the html comment since it’s an ID and not a class.
The script targets the div with var map
var map = new google.maps.Map(document.getElementById("map-location"),
mapOptions);
Anyway, you can see the dimensions are set on that div, which could be set in the CSS file rather than inline styles.
EDIT:
Keeping in tune with your thread title “Responsive Maps” I would stay away from any rigid fixed dimensions.
You can get some flexibility by using min/max sizes along with fluid dimensions.
Like so…
#map-location {
margin:0 auto;
width:100%;
max-width:800px;
height:50vh;
min-height:250px;
}
1 Like
I noticed the size defined there after I posted this…But I encountered this problem…
This is my HTML
<div style="height:100%; width: 100%;">
<div id="my_map"></div>
</div>
Simple CSS…
#my_map{
height: 300px;
width: 100%;
}
My Map loads fine no problem. Then I go to my CSS and change height:500px and I get error in console
ReferenceError: google is not defined
[Learn More]
EDIT: on multiple refresh it works.
Does outer div must be styled inline?
Also does this problem with multiple refreshes in order for it to work has to do with the way where <script></script> is placed within the HTML file…
<script> link for Google api map</script>
<script>link to Jquery</script>
<script>link to my local js file where initialize() function is located</script>
You shouldn’t need to set any inline styles, on inner or outer div.
The map follows your div dimensions, which can be set in your CSS.
1 Like
Actually I thought that was a poor example, coming from Google.
I haven’t looked at everything in detail but I did notice the internal script in the head tag.
It’s best practice to place your scripts right before the closing </body> tag, that way the page elements get loaded before the script runs.
I’m not positive, but I think library scripts like JQuery can go in the head.
EDIT:
You might find this responsive iframe to be of interest
1 Like
There are best practices to follow.
- no inline style in Javascript. All style goes into a CSS file. If it must be programmatic, try SASS.
This is because it kills the cascading property of CSS with a heavy override. It also messes up your style. - no divs only to add a class for layout, reduce wrapper divs
This is a principle at p96 of “Mastering SASS, Luke Watts”. - if you want your map to have certain dimensions, you should set width and height to the map itself.
- always use the official documentation with examples.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
here you can see how they set the dimensions on the id map.
<style>
#map {
width: 100%;
height: 400px;
background-color: grey;
}
</style>
- the 300px are magic numbers. You probably want something that fit within proportions of your window. One way to do it is to use margins and the main element has 100% as dimensions. ANother way to do this is to use a grid but it is more work and knowledge.
- I recommend reading books, tutorials and practice.
CSS can be fun.
Removing shadows overlapping between 2 elements, making a focus on an element affect the style of another elements, etc, are examples of nice tricks to build like with “lego”.
1 Like
Sorry Google, my mistake, that wasn’t your page. 
Thanks for pointing out the official doc from Google.
Their example locates the scripts correctly above the </body> , as I mentioned that it should be in post #7.
The JS was never injecting inline styles in the non-official demo. It was the author that placed the inline styles on that div. Moving those inline styles to the CSS file was mentioned in post #6.
1 Like
Ok I am not sure what I am doing wrong. Can you please open these files and run it on your end and see if you can get it working.
I might not be placing google link and jquery link in appropriate places.
Google Map.zip (1.0 KB)
I see you are missing your API key
Follow the instructions here
Adding a Google Map
There are three steps to creating a Google map with a marker on your web page:
Create an HTML pageAdd a map with a markerGet an API key
They also show the API script at the end of page
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
1 Like
I took my API key out before i zipped this and sent it to you. I was hoping you have API key and to try to run it on your end 
Okay, I got my own key now.
That may have been part of the problem.
Using this structure below (my key removed) worked fine with my key…
I do see that it looks like you will need to adjust your lat & lng settings in the script as well
{lat: -25.363, lng: 131.044}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing Maps - No Key</title>
<link rel="stylesheet" href="mystyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#map {
margin:0 auto;
width:100%;
max-width:800px;
height:60vh;
min-height:250px;
}
</style>
</head>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
EDIT:
Added some flexibility to map div
#map {
margin:0 auto;
width:100%;
max-width:800px;
height:60vh;
min-height:250px;
}
1 Like
Am I seeing this correctly but are you applying this css to the div just as if this was an image?
My css is an inline stylesheet in the head, just as if it were a linked stylesheet.
No inline styles, and you can name your map div whatever you want as long as it is the same in the css,html, and script.
#your-map {
margin:0 auto;
width:100%;
max-width:800px;
height:60vh;
min-height:250px;
}
<div id="your-map"></div>
var map = new google.maps.Map(document.getElementById('your-map'), {
zoom: 4,
center: uluru
});
1 Like
THis is the best practice in the tradition for years. And also the one in this book http://shop.oreilly.com/product/9780596529307.do
When developing only for new browsers, it is good to use the defer attribute and put the scripts in the head. That means scripts can be downloaded in parallel. But the best practice still remains more general.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.