I cannot get google maps in my view
Code
// html
<div id="map"></div>
// css
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
// scripts
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=PLACED MY CODE HERE... &callback=initMap"></script>
<script>
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
RESULT
Nothing shows in my view & no error in console or network tab.
Any idea?
try use a valid width too eg: (just for test)
// css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 640px;
width:800px;
}
I have problem with diplaying google map in circle on iOS systems. Map is overflowing box where it is included. It is a bug, or I do not know... Do you know some hack on that? Bug image.
My HTML code is pretty simple and looks like div.g-map>div.map where is rendered Google Map by JS.
CSS:
.map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* It has to be circle! */
.g-map {
position: relative;
width: 262px;
height: 262px;
border-radius: 50%;
overflow: hidden;
}
Try to avoid the use of absolute positioning if you can.
You still have an outer and inner blocks with same size.
Here is the fiddle, please try to open it in your browser:
https://jsfiddle.net/svitch/zb1fg48f/10/
And here is the code:
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
#map, #g-map {
height: 262px;
width: 262px;
}
/* It's a circle */
#g-map {
border: none;
border-radius: 50%;
overflow: hidden;
}
<div id="g-map"><div id="map"></div></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>
SOLUTION:
Just add z-index: 10; to .map and in iOS browsers map will not overflow circle.
.map {
z-index: 10;
...
}
I've been trying to make a rounded google map. I've finally achieved it and here is the jsfiddle
http://jsfiddle.net/DZTvR/13/
The problem is in chrome when I scroll, the mask remains in the same place while the map scrolls down.
I have tested on FF, opera safari and IE and it works great. It's just chrome
The HTML is
<div id="wrapp">
<div id="mask">
<div id="anyotherID"></div>
</div>
</div>
The JS
window.onload=function(){
var myLatlngDist = new google.maps.LatLng(-32.242741,-60.161446);
geocoder = new google.maps.Geocoder();
directionsService = new google.maps.DirectionsService();
var mapOptionsDist = {
zoom: 4,
center: myLatlngDist,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
mapDist = new google.maps.Map(document.getElementById('anyotherID'), mapOptionsDist);
}
The CSS
#anyotherID{
height:427px;
width:428px;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
overflow: hidden;
}
#mask {
border-radius: 1000px;
-moz-border-radius: 1000px;
-webkit-border-radius: 1000px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
Thanks for any help!
Got it to finally work here is how I fixed it
HTML:
<div id="wrapp">
<div id="mask">
<div id="anyotherID"></div>
</div>
<div style="clear:both;"></div>
</div>
Javascript:
var mapOptionsDist = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
}
mapLoc = new google.maps.Map(document.getElementById('anyotherID'), mapOptionsDist);
And the css:
#anyotherID{
height:427px;
width:427px;
}
#mask {
border-radius: 1000px;
-moz-border-radius: 1000px;
-webkit-border-radius: 1000px;
height:427px;
width:427px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
-webkit-mask-image: url("/Resources/Image/px.png");
}
#wrapp{
height:427px;
width:427px;
float:left;
}
Just to clarify, the image px.png is just an image of a black pixel, without it, it won't work
How to make a responsive google map from the code
<div class="map">
<iframe>...</iframe>
</div>
I use in css for full map
.map{max-width:100%;}
and small device
.map{max-width:40%;}
but it didn't work.
Anyone have idea? Thank you.
Add this to your initialize function:
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Resize stuff...
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
</script>
Adding a 100% to the width and height attributes of its iframe has always worked for me. For example
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=+&q=surat&ie=UTF8&hq=&hnear=Surat,+Gujarat&ll=21.195,72.819444&spn=0.36299,0.676346&t=m&z=11&output=embed"></iframe><br />
A solution without javascript:
HTML:
<div class="google-maps">
<iframe>........//Google Maps Code//..........</iframe>
</div>
CSS:
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
If you have a custom map size, remove the "height: 100% !important"
It's better to use Google Map API.
I've created an example here: http://jsfiddle.net/eugenebolotin/8m1s69e5/1/
Key features are using of functions:
//Full example is here: http://jsfiddle.net/eugenebolotin/8m1s69e5/1/
map.setCenter(map_center);
// Scale map to fit specified points
map.fitBounds(path_bounds);
It handles resize event and automaticaly adjusts size.
in the iframe tag, you can easily add width='100%' instead of the preset value giving to you by the map
like this:
<iframe src="https://www.google.com/maps/embed?anyLocation" width="100%" height="400" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Check this for a solution: http://jsfiddle.net/panchroma/5AEEV/
I can't take the credit for the code though, it comes from quick and easy way to make google maps iframe embed responsive.
Good luck!
CSS
#map_canvas{
width:50%;
height:300px !important;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta charset="utf-8"/>
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Here a standard CSS solution + JS for the map's height resizing
CSS
#map_canvas {
width: 100%;
}
JS
// On Resize
$(window).resize(function(){
$('#map_canvas').height($( window ).height());
JsFiddle demo : http://jsfiddle.net/3VKQ8/33/
i think the simplest way will be to add this css and it will work perfectly.
embed, object, iframe{max-width: 100%;}
My Responsive [Solution] Google Map in Foundation 4 Modal
JS
Create an external JavaScript file (i.e. mymap.js) with the following code
google.maps.visualRefresh = true; //Optional
var respMap;
function mymapini() {
var mapPos = new google.maps.LatLng(-0.172175,1.5); //Set the coordinates
var mapOpts = {
zoom: 10, //You can change this according your needs
disableDefaultUI: true, //Disabling UI Controls (Optional)
center: mapPos, //Center the map according coordinates
mapTypeId: google.maps.MapTypeId.ROADMAP
};
respMap = new google.maps.Map(document.getElementById('mymap'),
mapOpts);
var mapMarker = new google.maps.Marker({
position: mapPos,
map: respMap,
title: 'You can put any title'
});
//This centers automatically to the marker even if you resize your window
google.maps.event.addListener(respMap, 'idle', function() {
window.setTimeout(function() {
respMap.panTo(mapPos.getPosition());
}, 250);
});
}
google.maps.event.addDomListener(window, 'load', mymapini);
$("#modalOpen").click(function(){ //Use it like <a href="#" id="modalOpen"...
$("#myModal").show(); //ID from the Modal <div id="myModal">...
google.maps.event.trigger(respMap, 'resize');
});
HTML
Add the following code before the tag:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="js/mymap.js"></script>
Add this to the modal code:
<div id="mymap"></div>
CSS
Add this to your stylesheet:
#mymap { margin: 0; padding: 0; width:100%; height: 400px;}
Tried it with CSS, but its never 100% responsive, so I built a pure javascript solution. This one uses jQuery,
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
resizeMap();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
function resizeMap(){
var h = window.innerHeight;
var w = window.innerWidth;
$("#map_canvas").width(w/2);
$("#map_canvas").height(h-50);
}
My solution based on eugenemail response:
1. HTML - Google Maps API
Get API Key
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
2. HTML - Canvas
<div id="map_canvas"></div>
3. CSS - Map canvas
#map_canvas {
height: 400px;
}
4. JavaScript
function initialize() {
var lat = 40.759300;
var lng = -73.985712;
var map_center = new google.maps.LatLng(lat, lng);
var mapOptions = {
center: map_center,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapCanvas = document.getElementById("map_canvas");
var map = new google.maps.Map(mapCanvas, mapOptions);
new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(lat, lng)
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(map_center);
});
}
initialize();
I am an amateur but I found this worked:
.maps iframe {
position: absolute;
}
body {
padding-top: 40px;
padding-bottom: 820px;
height: available;
}
There may be a bit of whitespace at the bottom but I am satified
Responsive with CSS
You can make the Iframe responsive with the following CSS codes.
.map {
position: relative;
padding-bottom: 26.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.map iframe,
.map object,
.map embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Responsive with JavaScript
This possible through window.resize event and you can apply this on google map like google.maps.event.addDomListener(window, 'resize', initialize);
Consider the following example:
function initialize() {
var mapOptions = {
zoom: 9,
center: new google.maps.LatLng(28.9285745, 77.09149350000007),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('location-canvas'), mapOptions);
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(28.9285745, 77.09149350000007)
});
}
google.maps.event.addDomListener(window, 'resize', initialize);
Take a look for more details - https://webomnizz.com/how-to-make-responsive-google-map-with-google-map-api/
I use jQuery mobile for my iOS application. Here is what it happens inside when I load the map:
I have used the following script in order to generate this.
var map
var mark
function initialize() {
var latlng = new google.maps.LatLng(52.404657,-1.491413);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
mark = new google.maps.Marker( {
position: latlng,
map:map
})
}
function mostrarUbicacion(){
navigator.geolocation.getCurrentPosition( lecturaGPS , errorGPS , {enableHighAccuracy:true} )
}
function lecturaGPS(ubicacion){
var miubicacion = new google.maps.LatLng(ubicacion.coords.latitude, ubicacion.coords.longitude);
map.setCenter(miubicacion)
mark.setPosition(miubicacion)
}
function errorGPS(){
alerta(" unable to connect")
}
html:
<body onload="initialize()" style="height:100%">
<div id="map_canvas" style="width:100%; height:50%; padding:0;"></div>
<button onClick="mostrarUbicacion()"> Click to find where you are! </button>
</body>
try to set the div for the map and the css this way:
HTML:
<div class="Flexible-container" id="map" style="margin:1.5%;">
<!-- this is the div for the map -->
</div>
CSS:
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 32.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
to adjust the width of the div use percentages; you can adjust the height setting padding-bottom.
here the doc