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)
Related
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>
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
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>
New tiles are not being loaded on drag and release. Instead just the blank background is shown.
Zoom in or out will load a new map.
I'm loading the current release: http://maps.google.com/maps/api/js
<style type="text/css"> .single_map_canvas img { max-width: none; } </style>
<div class="single_map_canvas" id="single_map" style="height: 225px; width: 450px;"></div>
<script type="text/javascript">
function initialize() {
var singleLatlng = new google.maps.LatLng(37.5364,-122.2455);
var mapOptions = {
zoom: 12,
center: singleLatlng,
draggable: true
}
var map = new google.maps.Map(document.getElementById('single_map'), mapOptions);
var marker = new google.maps.Marker({
position: singleLatlng,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
UPDATE: This has to be inside the <head> tag.
<style type="text/css"> .single_map_canvas img { max-width: none; } </style>
<!DOCTYPE html>
<html>
<head>
<!-- <title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
-->
<style type="text/css"> .single_map_canvas img { max-width: none; } </style>
</head>
<body>
<div class="single_map_canvas" id="single_map" style="height: 225px;width:450px;"></div>
<script>
var map;
function initMap() {
var singleLatlng = new google.maps.LatLng(37.5364, -122.2455);
map = new google.maps.Map(document.getElementById('single_map'), {
center: singleLatlng,
zoom: 8
});
var marker = new google.maps.Marker({
position: singleLatlng,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>
</html>
hope this helps
most probably ur network is slow, i guess
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>