Google maps not loading properly - javascript

I will lead with the image:
This is what is returned when I create my google maps embed with the API.
My JS
var map;
function initMap(){
map = new google.maps.Map(document.getElementById('maphere'), {
center: {lat: -81.378373, lng: 28.536156},
zoom: 18
});
}
my HTML:
<div id="hideMapOverflow">
<div id="maphere" style="height:100%"></div>
</div>
And the CSS that goes with it:
#hideMapOverflow{
overflow:hidden;
height:500px;
width:100%;
}
#maphere{
height:100%;
}
The maps component seems to load, but the map itself isn't. Did I miss anything?

Your latitude and longitude are backwards.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('maphere'), {
center: {
lng: -81.378373,
lat: 28.536156
},
zoom: 18
});
}
google.maps.event.addDomListener(window, "load", initMap);
#hideMapOverflow {
overflow: hidden;
height: 500px;
width: 100%;
}
#maphere {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="hideMapOverflow">
<div id="maphere" style="height:100%"></div>
</div>

Related

Google map not showing without css part

i am working on demo code
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script src="js/index.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7CfuQy1peyVRH0y2ejWQfXVq3_JMi1xE&callback=initMap">
</script>
</body>
</html>
and js file
function initMap() {
alert("Inside 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
});
}
if i am removing (from html file)
<style>
#map {
height: 400px;
width: 100%;
}
</style>
then map is not showing but a error in console is coming (in image)
any body can please tell me how style or css can effect this
(with style tags)

Why Can't I load google map? [duplicate]

This question already has an answer here:
Responsive Google Maps v3 - Cannot get 100% height
(1 answer)
Closed 5 years ago.
I am new to programming and trying to learn it. For a projecti wanted to load a google map but i have been trying since hours but cant seem to load the google map and yet I dont see any javascript errors in the console. Can anyone points me to what mistake I am doing
<!DOCTYPE html>
<html>
<head>
<title>BART</title>
<style>
body
{
height: 100%;
}
#map
{
height: 80%;
width: 60%;
}
</style>
<script src = "https://maps.googleapis.com/maps/api/js?key=mykey</script>
<script>
var map ;
//function to initialize map
var initialize = function()
{
var mapOptions = {
center :{lat: 37.775362, lng: -122.417564},
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
}
window.onload = initialize;
</script>
</head>
<body>
<div id ="map">
</div>
</body>
</html>
You should add CSS as
#map {
height: 400px;
width: 400px;
}
<!DOCTYPE html>
<html>
<head>
<title>BART</title>
<style>
body {
height: 100%;
}
#map {
height: 400px;
width: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<script>
var map;
//function to initialize map
var initialize = function() {
var mapOptions = {
center: {
lat: 37.775362,
lng: -122.417564
},
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
}
window.onload = initialize;
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
Please use the code provided in google map documentation.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>

No errors but map is not showing in website in js only background part is visible ,

after tried a lot , I had apply previous answer but not got proper solution . Actually I want that when user enter address of location then my code must show that address on map in web . But it is not happening .
convert.js :-
geocoder=new google.maps.Geocoder();
function getCoordinates(address,callback)
{
var coordinates;
geocoder.geocode({address:address},function(results,status){
alert('Called');
coordsx=results[0].geometry.location;
//coords1=results[0].geometry.location;
coordinates=[coordsx.lat(),coordsx.lng()];
callback(coordinates);
//alert(coordinates)
})
}
testmap.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#map-canvas {
width: 700px;
height: 600px;
position: absolute;
top: 40px;
left: 360px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="convert.js"></script>
<script>
google.maps.visualRefresh=true;
function initialize() {
var mapOptions;
getCoordinates('J-24 MIG colony indore',function(coords){
mapOptions = {
center: new google.maps.LatLng(coords[0],coords[1]),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
alert('Func')
alert(mapOptions.center);
});
map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" height="100%" width="100%%"></div>
</body>
</html>
The line map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions); needs to be inside the anonymous function function(coords){.. where mapOptions is defined. This should work:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#map-canvas {
width: 700px;
height: 600px;
position: absolute;
top: 40px;
left: 360px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="convert.js"></script>
<script>
google.maps.visualRefresh=true;
function initialize() {
var mapOptions;
getCoordinates('J-24 MIG colony indore',function(coords){
mapOptions = {
center: new google.maps.LatLng(coords[0],coords[1]),
zoom: 8,
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" height="100%" width="100%%"></div>
</body>
</html>
The problem is that you had not put map object so it happens try to put these in your code ,
map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
It will surely work

Custom Google Map API V3 PEGMAN Button

I made custom zoom controls and want to add Pegman control with the same style as well. Is it possible?
Custom zoom controls are added as follows (from this questions answer):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR-MAP_API-ID&sensor=false&region=AU">
</script>
<script type="text/javascript">
function HomeControl(controlDiv, map) {
google.maps.event.addDomListener(zoomout, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 0){
map.setZoom(currentZoomLevel - 1);}
});
google.maps.event.addDomListener(zoomin, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 21){
map.setZoom(currentZoomLevel + 1);}
});
}
var map;
var markersArray = [];
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-33.90224, 151.20215);
var mapOptions = {
zoom: 15,
center: myLatlng,
Marker: true,
panControl: false,
zoomControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="zoomout" style="border:1px solid; width:150px; heoght:50px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
<div id="zoomin" style="border:1px solid; width:150px; heoght:50px;cursor:pointer;">ZOOM ME IN</div>
</body>
</html>
Is it possible to add one more div element in the body with custom Pegman button, but it need to work exactly as it is working in default button (drag and drop yellow man to the map, Pegman is moving on hover etc) only the square button behind him will be another style.
When you only want to style the button, not the pegman, it's quite easy.
The button has the class gm-svpc , simply add your style.
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
streetViewControl: true
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
.gm-svpc {
background: tomato !important;
border: 2px solid firebrick;
border-radius: 20px !important;
}
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

Google maps moving marker on click

What I want to do is,
on my map, when I click somewhere on the map, it shows a marker on the point, then I click different point on the map then it shows a another marker. But I want it to move the first marker to the second point.
( I put " behind the html tags for putting the code here.)
This is my code:
<html>
<style type="text/css">
#map_canvas {
height: 760px;
width: 1100px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(42.55308, 9.140625);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
animation: google.maps.Animation.DROP,
});
map.setCenter(location);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
Every time placemarker() is ran, it creates a new marker.
You need to create the marker once outside of the placemarker function and after that, inside placemarker, use marker.setPosition().
Another solution is to move a marker, for that you just user marker.setPosition(). (thanks kjy112 for the warning :)
<html>
<style type="text/css">
#map_canvas {
height: 760px;
width: 1100px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var marker;
function initialize() {
var latlng = new google.maps.LatLng(42.55308, 9.140625);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
if (marker == undefined){
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP,
});
}
else{
marker.setPosition(location);
}
map.setCenter(location);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
To remove a marker just setMap(null) it.
<html>
<style type="text/css">
#map_canvas {
height: 760px;
width: 1100px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var oldMarker;
function initialize() {
var latlng = new google.maps.LatLng(42.55308, 9.140625);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
animation: google.maps.Animation.DROP,
});
if (oldMarker != undefined){
oldMarker.setMap(null);
}
oldMarker = marker;
map.setCenter(location);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>

Categories