This seems related to maps js service (Maps JavaScript API) now being enabled on your API or you might have restrictions on your key.
Try this example from google documents – https://developers.google.com/maps/documentation/javascript/adding-a-google-map?hl=ja#step_2_add_a_map_with_a_marker
just place your key here and check console log for errors, based on that you can see what is going wrong.
i get my latitude and longitude position correctly but google map is not visible in my document though my api key is correct … i could not get google map in my result
help me figuring out with this problem to get latitude and longitude over googlemap …it is a simple html doc with internal css and java script file .
why i m not getting a map??
here is my code
<!DOCTYPE html>
<html>
<head>
<title>location map</title>
<style>
*{
padding: 0;margin: 0;
}
body{
width: 100%;
height: 100%;
}
#button-layer{
width: 500px;
height: 200px;
margin: 10px;
text-align:center;
margin: auto;
}
#map-button{
font-size: 30px;
color: red;
background-color: yellow;
font-weight: bold;
width: 300px;
height: 60px;
margin: 10px;
text-align: center;
border: 2px solid black;
}
#map{
height: 100%;
width: 100%;
}
p{
text-align:center;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h1><center>get your current location</center></h1>
<br><br>
<div id="button-layer">
<button id="map-button" type="button" onclick="locate()">my current
location</button>
</div>
<p id="demo"></p>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=********-
nRPS4GJX4z3HKc3YmH8jjdCXE&callback=initMap">
</script>
<script >
var map;
function initMap() {
var mapLayer = document.getElementById("map");
var centerCoordinates = new google.maps.LatLng(37.6, -95.665);
var defaultOptions = { center: centerCoordinates, zoom: 4 }
map = new google.maps.Map(mapLayer, defaultOptions);
}
var x= document.getElementById("demo");
function showLocation(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
x.innerHTML="latitude:"+latitude+"and longitude:"+longitude;
var infoWindowHTML = "latitude:"+latitude+"<br> longitude:"+longitude;
var infoWindow = new google.maps.InfoWindow({map: map, content: infoWindowHTML});
var currentLocation = { lat:latitude, lng:longitude };
infoWindow.setPosition(currentLocation);
document.getElementById("map-button").style.display = 'none';
}
function errorHandler(err){
if(err.code==1){
alert("Error: Access is denied!");
}
else if(err.code==2){
alert("Error: Position is unavailable!");
}
}
function locate(){
document.getElementById("map-button").disabled=true;
document.getElementById("map-button").innerHTML="processing..."
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showLocation,errorHandler);
}
else{
x.innerHTML="geolocation is not supported in this browser";
}
}
</script>
Please provide a
@geocodezip see now i have provide u with complete html and css part too. help me please .