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.
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>
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>
When I run my code, the map doesn't display. I am working on my localhost. I want to put lat and lng to inputs. Then when I change the lat and lng the inputs will change dynamically. How can I solve this problem?
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41,28);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
);
}}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val() = event.latLng.lat();
$('#lng').val() = event.latLng.lng();
});
marker.addListener('dragend',function(event) {
$('#lat').val() = event.latLng.lat();
$('#lng').val() = event.latLng.lng();
});}
</script>
</body></html>
You have some bugs in your code.. and you are not calling the function
initialize(). Try this updated code
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41,28);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
});
}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
marker.addListener('dragend',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
}
initialize();
</script>
</body></html>
Here I can save selected coordinates. İt may help someone.
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<p id="results">result</p>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41.015137,28.979530);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
});
}
function addMarker(latlng,title,map) {
var coords = [];
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
marker.addListener('dragend',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
coords.push(event.latLng.lat());
coords.push(event.latLng.lng());
$("#results").append('<div>'+JSON.stringify(coords)+'</div>');
coords = [];
});
}
initialize();
</script>
</body></html>
I have made a map with Google from this:
Google API
But I would like to put in 8 more pins, that should illustrate the places I have been in the world. But I dont have an idea if I can do that from that code?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var place_1 = {lat: -25.363, lng: 131.044};
var place_2 = {lat: 55.971232, lng: 9.854725};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=xxxxxx&callback=initMap">
</script>
</body>
</html>
You can use as many markers as you want:
function initMap() {
//this is different:
var places = new Array();
places.push({lat: -25.363, lng: 131.044});
places.push({lat: 55.971232, lng: 9.854725});
//push all of remaining places
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
//and this is different:
var markers = new Array();
for(var i = 0; i < places.length; i++){
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(places[i].lat, places[i].lng),
map: map,
title: 'Hello World!'
}));
}
}
I have a button which adds a heatmaplayer to my map. When pressing it twice. There are 2 heatmaplayers stacked. When pressing the delete heatmaplayer button only 1 heatmaplayer get's deleted. Why is that so? How can i delete all stacked heatmaps with one click?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps</title>
</head>
<body>
<div id="floating-panel">
<button onclick="createHeatmap()">Create Heatmap</button>
<button onclick="deleteHeatmap()">Delete Heatmap</button>
</div>
<div id="map" style="height: 600px; width: 800px;"></div>
<script>
var map, heatmap;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 37.775, lng: -122.434},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
function createHeatmap(){
var heatmapdata = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),];
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapdata,
});
heatmap.setMap(map);
}
function deleteHeatmap(){
heatmap.setMap(null);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=visualization&callback=initMap">
</script>
</body>
</html>
You have to keep track of all the "layers" that you create, and then no matter how much heatmap you add, you just erase them with a for loop (looping through an array of created heatmaps).
This is the main function which nullifies the heatmaps and empties the array so when you start all over the array also starts from zero-index:
function deleteHeatmap(){
for (var k = 0; k < array.length; k++) {
array[k].setMap(null);
}
array=[];
}
Here is the example in the fiddle: https://jsfiddle.net/eugensunic/3q6etox0/3/
Full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps</title>
</head>
<body>
<div id="floating-panel">
<button onclick="createHeatmap()">Create Heatmap</button>
<button onclick="deleteHeatmap()">Delete Heatmap</button>
</div>
<div id="map" style="height: 600px; width: 800px;"></div>
<script>
var map, heatmap;
var heatmapdata;
var array=[];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 37.775, lng: -122.434},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
function createHeatmap(){
heatmapdata = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),];
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapdata,
});
array.push(heatmap);
heatmap.setMap(map);
}
function deleteHeatmap(){
for (var k = 0; k < array.length; k++) {
array[k].setMap(null);
}
array=[];
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=visualization&callback=initMap">
</script>
</body>
</html>
You need to either delete (remove from the map) any existing heatmap before you create a new one (losing access to the original) or only allow a single heapmap to be created.
proof of concept fiddle
code snippet:
var map, heatmap;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {
lat: 37.775,
lng: -122.434
},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
function createHeatmap() {
if (!heatmap || !heatmap.getMap || heatmap.getMap() == null) {
var heatmapdata = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),
];
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapdata,
});
heatmap.setMap(map);
}
}
function deleteHeatmap() {
heatmap.setMap(null);
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<div id="floating-panel">
<button onclick="createHeatmap()">Create Heatmap</button>
<button onclick="deleteHeatmap()">Delete Heatmap</button>
</div>
<div id="map" style="height: 600px; width: 800px;"></div>