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;
}
Related
My goal is to have CSS-only icons for my Google Maps marker clusters. I have seen in the documentation's "advanced example" (link) that CSS-only icons are possible. However, I have been unable to translate this example into my own project.
I have attempted to build a JSFiddle with my code, though I can not seem to initialize the map through JSFiddle due to API restrictions. When I run the code on my site, it adds numbers to the map, but no icons, as seen below.
I created some styles
var styles = [{
width: 30,
height: 30,
className: "custom-clustericon-1",
},
{
width: 40,
height: 40,
className: "custom-clustericon-2",
},
{
width: 50,
height: 50,
className: "custom-clustericon-3",
},
];
And I have attempted to initialize like this:
var markerCluster = new MarkerClusterer(map, markers,
{
styles: styles,
clusterClass: "custom-clustericon",
});
Where am I missing the mark here? I'd like to have marker icons exactly like the ones in the "advanced example", but I'm at a loss. I have searched extensively online for examples of css-only icons but could not find any standalone examples. Your help is kindly appreciated.
You are using the wrong version of the MarkerClusterer library.
Use this one:
<script src="https://googlemaps.github.io/js-markerclustererplus/dist/index.min.js"></script>
proof of concept fiddle
code snippet:
function map_initialize() {
var mapoptions = {
center: new google.maps.LatLng(0, 0),
zoom: 0,
maxZoom: 15,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true,
zoomControl: true,
scrollwheel: true
};
var styles = [{
width: 30,
height: 30,
className: "custom-clustericon-1",
},
{
width: 40,
height: 40,
className: "custom-clustericon-2",
},
{
width: 50,
height: 50,
className: "custom-clustericon-3",
},
];
var map = new google.maps.Map(document.getElementById("mapdivbig"),
mapoptions);
var infoWin = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var markers = locations.map(function(location, i) {
bounds.extend(location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
position: location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
styles: styles,
clusterClass: "custom-clustericon",
});
}
var locations = [{
lat: 45.4208,
lng: -123.8,
info: 'Location 1'
},
{
lat: 47.6117,
lng: -122.345,
info: 'Location 2'
},
{
lat: 47.6308,
lng: -122.375,
info: 'Location 3'
}
]
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#mapdivbig {
width: 100%;
height: 100%;
background-color: grey;
}
#mapdiv {
width: 100%;
height: 325px;
background-color: grey;
}
.custom-clustericon {
background: var(--cluster-color);
color: #fff;
border-radius: 100%;
font-weight: bold;
font-size: 15px;
display: flex;
align-items: center;
}
.custom-clustericon::before,
.custom-clustericon::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background: var(--cluster-color);
opacity: 0.2;
border-radius: 100%;
}
.custom-clustericon::before {
padding: 7px;
}
.custom-clustericon::after {
padding: 14px;
}
.custom-clustericon-1 {
--cluster-color: #00a2d3;
}
.custom-clustericon-2 {
--cluster-color: #ff9b00;
}
.custom-clustericon-3 {
--cluster-color: #ff6969;
}
<!DOCTYPE html>
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://googlemaps.github.io/js-markerclustererplus/dist/index.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=map_initialize" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="mapdivbig"></div>
</body>
</html>
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'm trying to make a side by side Google Fusion Map and while that seems to be working OK, when I click on a polygon, the info window shows up as blank.
I'm trying to work out why it might not be picking up and displaying the information from the table, when the rest of the data seems to be showing up.
The map is here: http://clairemiller.net/blaenaupop.html
The code I'm using to display that is:
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas { width: 335px; height: 400px; float: left}
#map_canvas2 { width: 335px; height: 400px; }
#image {float: bottom}
body { margin: 0px}
p {color: white; font-family: arial; font-size: 12px; margin: 0px; position: relative; left: 4px; top: 3px }
#left { width: 335px; height: 20px; float: left; background-color: #007A8F}
#right { width: 335px; height: 20px; float: left; background-color: #005F70}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
var map;
var layer;
var layer2;
var secondMapMove = false;
var secondMapBounds = false;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(51.787578, -3.204393),
zoom: 12,
mapTypeId: 'roadmap'
});
var layer = new google.maps.FusionTablesLayer({
center: new google.maps.LatLng(51.5021181, -3.17909),
query: {
select: 'geometry',
from: '1F3SbppvMyF-3lcT5zrYS8S1X8JD1G2-0aQkWLPw',
}
});
layer.setMap(map);
map2 = new google.maps.Map(document.getElementById('map_canvas2'), {
zoom: 12,
mapTypeId: 'roadmap'
});
var layer2 = new google.maps.FusionTablesLayer({
center: new google.maps.LatLng(53.13359,-1.955566),
query: {
select: 'geometry',
from: '1Hf9Z80JTCiq-zWwhhSPrbifO7q9dvA_DP_BN8IY',
}
});
layer2.setMap(map2);
google.maps.event.addListener(map,'zoom_changed',function(){
if(secondMapBounds!=true) {
var tmpZoom = map.getZoom();
map2.setZoom(tmpZoom);
} else {
secondMapBounds = false;
}
});
google.maps.event.addListener(map2,'zoom_changed',function(){
secondMapBounds = true;
var tmpZoom1 = map2.getZoom();
map.setZoom(tmpZoom1);
});
google.maps.event.addListener(map,'bounds_changed',function(){
if(secondMapMove!=true) {
var tmpBounds = map.getCenter();
map2.setCenter(tmpBounds);
} else {
secondMapMove=false;
}
});
google.maps.event.addListener(map2,'bounds_changed',function(){
secondMapMove = true
var tmpBounds2 = map2.getCenter();
map.setCenter(tmpBounds2);
});
}
</script>
</head>
<body onload="initialize();">
<div class="mapMap" id="map_canvas"></div>
<div class="mapMap" id="map_canvas2"></div>
</body>
</html>
The IDs for the two tables are in there, the infowindow appears to be showing up fine on them.
I'm wondering what I've missed that is causing the infowindows to show up blank.
It doesn't show blank, it shows white.
The contents of the infoWindows are inside <p/>-elements, the background of the infoWindows is white, and this is your CSS:
p {color: white;/*......*/}
change the color
.googft-info-window p{color:#000;}
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
my google maps script is gray when load the page, when I open the inspector of elements seen, I think it's for the resize, you can be? Thanks friends, I expect an answer. Here you have all the html of what would be the map, then this is included within a div. The strange thing is that when you resize the screen, is observed. I need help!!!!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#googleMap {
width: 100%;
height: 600px;
margin-top: 6.5%;
overflow:visible;
}
img, embed, object, video {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js? key=AIzaSyCbVI4cT8PjwlmV0pZfK961MGnd6H3aGoY&signed_in=false"> </script>
<script>
var myCenter=new google.maps.LatLng(39.287649, -0.422548);
var myCenterverd=new google.maps.LatLng(39.287413, -0.422255);
var myCenterroig=new google.maps.LatLng(39.288497, -0.423953);
var myCentergroc=new google.maps.LatLng(39.287766, -0.421604);
function initialize() {
var mapOptions = {
center:new google.maps.LatLng(39.287413, -0.422255),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP,
//disableDefaultUI: true
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapOptions);
//var marker=new google.maps.Marker({position:myCenter,icon:'gotaico.png'});
var markerverd=new google.maps.Marker({position:myCenterverd,icon:'../dashboard/include/Mapa/iconosrellenos/gotaicoverd.png'});
var markerroig=new google.maps.Marker({position:myCenterroig,icon:'../dashboard/include/Mapa/iconosrellenos/gotaicoroig.png'});
var markergroc=new google.maps.Marker({position:myCentergroc,icon:'../dashboard/include/Mapa/iconosrellenos/gotaicogroc.png'});
//marker.setMap(map);
markerverd.setMap(map);
markerroig.setMap(map);
markergroc.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap"></div>
</body>
</html>
It seems that the following styles are causing the error:
img,
embed,
object,
video {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
Remove these and it will work: https://jsfiddle.net/cug0an68/1/
Ps, you may want to set up a new api key as you have made this one publicly available