Not sure why the google map cannot display
HTML Code
<div id="map" style="width:400px;height:600px;"></div>
<script>
function initMap() {
var location = { lat: 1.275699, lng: 103.845802 };
var map = new goole.maps.Map(document.getElementByID("map"), {
zoom: 5
center: location})
var marker = new google.maps.Marker({ position: myCenter });
marker.setMap(map);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCwXow-YSSaavXynAkBF1TkpAPKijAC-Qk&callback=initMap"></script>
I haven't added any CCS code for the map.
there are syntax errors in your code I have corrected them ref
<div id="map" style="width:400px;height:600px;"></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=AIzaSyCwXow-YSSaavXynAkBF1TkpAPKijAC-Qk&callback=initMap" async defer></script>
Related
I would like to center a google map from an address I get from a database with laravel. However the map isn't showing. Where is the problem?
<script>
function initMap() {
getLocations();
}
function getLocations() {
var http = new XMLHttpRequest();
http.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=' + {{ $address }} + '&key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI', true);
http.onload = function() {
var coordinates = JSON.parse(http.responseText);
coordinates = coordinates['results'][0]['geometry']['location'];
var event = {lat: coordinates['lat'], lng: coordinates['lng']};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: event
});
var marker = new google.maps.Marker({
position: event,
map: map
});
};
http.send();
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI&callback=initMap">
</script>
you should show a bit more of your code, and give error codes returned.
Anyhow I think it's either the way you pass the address or the way you have your html setup. A quick way to check if it's a good address is placing an alert. Or you could test for a 200 response from the server.
Look at the following code that works
and here is the snippet
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function 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
});
getLocations();
}
function getLocations() {
var http = new XMLHttpRequest();
http.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&&key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI', true);
http.onload = function() {
var coordinates = JSON.parse(http.responseText);
coordinates = coordinates['results'][0]['geometry']['location'];
var event = {lat: coordinates['lat'], lng: coordinates['lng']};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: event
});
var marker = new google.maps.Marker({
position: event,
map: map
});
};
http.send();
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI&callback=initMap">
</script>
</body>
</html>
The script isn't rendering the map.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
margin: 0;
padding: 0;
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div style= "Height:100% Width:100%;">
<div id ="map-canvas"></div></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=API_Key&callback=initMap">
//I am not sure what going on for some reason the map will not load and I am not sure if it is because of issues with my formatting or what, but I am lost.
</script>
<script type ="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -27.3818611, lng: 152.7130136},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var places = [
{lat: -25.363, lng: 131.044, Name: "Uluru"},
{lat:-24.363, lng: 131.044, Name: "Placeland"}];
var marker, i;
var markers = new Array();
for(var i=0; i<crimes.length; i++){
var marker = new google.maps.Marker({
position: places[i].lat, places[i].lng,
map: map,
title: places[i].Name
//I am trying to get a marker with this but am not sure if the code is incorrect.
});
}
}
</script>
</body>
</html>
document.getElementById('map') should be document.getElementById('map-canvas')
Nevermind I fixed it.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script type ="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -24.363, lng: 131.044},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var places = [
{lat: -25.363, lng: 131.044, Name: "Uluru"},
{lat:-24.363, lng: 131.044, Name: "Placeland"}];
var marker, i;
var markers = new Array();
for(var i=0; i<places.length; i++){
var marker = new google.maps.Marker({
position: places[i],
map: map,
title: places[i].Name
//I am trying to get a marker with this but am not sure if the code is incorrect.
});
}
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
//I am not sure what going on for some reason the map will not load and I am not sure if it is because of issues with my formatting or what, but I am lost.
</script>
</body>
</html>
The issue was with not closing brackets etc.
I have created three markers using Google Maps API. Is there a way that I can add an event listener to each marker so that they will work independently when the corresponding marker is active? I would like to display a message if the user is getting closer to a marker, specifically with bounds_changed. I want to continue giving the user a message until they get to a zoom level of say 5.
<script>
var map;
var score;
score = 0;
function initMap() {
var chicago = {lat: 41.8781, lng: -87.6298};
var indianapolis = {lat: 39.7684, lng: -86.1581};
var oklahomaCity = {lat: 35.4819, lng: -97.5084};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.0, lng: 0.0},
zoom: 1
});
var chicagoMarker = new google.maps.Marker({
position: chicago,
});
var oklahomaCityMarker = new google.maps.Marker({
position: oklahomaCity,
});
var indianapolisMarker = new google.maps.Marker({
position: indianapolis,
});
if (score==0) {
chicagoMarker.setMap(map)
}
if (score==1) {
oklahomaCityMarker.setMap(map)
}
if (score==2) {
indianapolisMarker.setMap(map)
}
chicagoMarker.setVisible(false);
indianapolisMarker.setVisible(false);
oklahomaCityMarker.setVisible(false);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuvsCAF0gVmwv6AF0SoA3xBjV66RG4r7o&callback=initMap"
async defer></script>
try this
google.maps.event.addListener(chicagoMarker, 'click', function(){
//do something
})
I have posted my code but map is not load.please suggestion to this question.
i will also use google map js but can't load.
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap">
if($('.map-container:visible').length >= 0)
{
initMap();
}
function initMap(){
google.maps.visualRefresh = true;
var myLatlng = new google.maps.LatLng('24.980832' ,'55.092480');
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('dubaiTradeNew'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Dubai Trade'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
Please try adding height width once
<div class="map-container" id="dubaiTradeNew" style="height:100px;width:100px">
</div>
And Set different scripts
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<script>
//Code here
</script>
I have a JavaScript file to work with Google JavaScript API for maps however the function is not doing anything its like its not being reached any help is appreciated thanks
window.onload = function() {
alert("Hi!");
var map;
function initMap() {
alert("Function reached!");
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
}
try executing your initMap function afterwards (or when it is needed)
window.onload = function() {
alert("Hi!");
var map;
function initMap() {
alert("Function reached!");
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
};
initMap();
}