I tried the tutorial from this place.
When I get at the heatmap part it doesn't draw the map anymore.
I guess I must be doing something wrong but I have no clue...
The moment I remove the comments from icon: image part I'll get a map drawn,
but the heatmap part isn't working.
I hope that somebody can help me
Kind Regards
Guy
// Reference to the Firebase database.
var firebase = new Firebase("https://adopt-a-portal.firebaseio.com/");
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 3
});
// Add marker on user click
map.addListener('click', function(e) {
firebase.push({lat: e.latLng.lat(), lng: e.latLng.lng()});
});
// Create a heatmap.
var heatmap = new google.maps.visualization.HeatmapLayer({
data: [],
map: map,
radius: 8
});
firebase.on("child_added", function(snapshot, prevChildKey) {
// Get latitude and longitude from Firebase.
var newPosition = snapshot.val();
// Create a google.maps.LatLng object for the position of the marker.
// A LatLng object literal (as above) could be used, but the heatmap
// in the next step requires a google.maps.LatLng object.
var latLng = new google.maps.LatLng(newPosition.lat, newPosition.lng);
// Place a marker at that location.
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
position: latLng,
map: map
// icon: image
});
heatmap.getData().push(latLng);
});
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o®ion=BE&callback=initMap"
async defer></script>
<script src="map.js"> </script>
</body>
</html>
I get a javascript error with your code: Uncaught TypeError: Cannot read property 'HeatmapLayer' of undefined
You aren't including the visualization library.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o®ion=BE&callback=initMap"
async defer></script>
Should be (note the added "libraries=visualization"):
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o®ion=BE&callback=initMap"
async defer></script>
proof of concept fiddle
Related
First I checked without setTimeout function google map API is fully loaded or not using map idle function. it's working fine. but I tried using the setTimeout function in the google map loading page. the map is loaded successfully. but map idle function is not working on how to fix this issue.
Code.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<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() {
var myLatLng = {lat: -25.363, lng: 131.044};
setTimeout(function(){
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
},2000);
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log('hi')
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
})
// 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=***********&callback=initMap">
</script>
</body>
</html>
How to achieve this scenario.
You can use the tilesloaded event of the Maps Javascript API Events. The tilesloaded is used to detect when the map has been fully loaded. A sample POC below using your current implementation.
var map;
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
map.addListener('tilesloaded', function() {
console.log('map is loaded');
});
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log('map is idle')
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
});
}
If this doesn't help you, you can also check the answer from this Stackoverflow question How can I check whether Google Maps is fully loaded?. It appears a lot of users were also experiencing this issue before.
Hope this information find you helpful and good luck on your applicaion!
Use titesloaded event to listen to complete map load.
I have a google map with a new key
but it gets error in console
error:
Uncaught TypeError: window.Map is not a constructor
at Zr (map.js:2)
at ds.release (map.js:53)
at gs (map.js:5)
at _.rl.Ab (map.js:59)
at map.js:46
HTML
<head>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=mykey">
</script>
</head>
<body onload="init()">
<div id="map_canvas"></div>
</body>
<script src="js/index.js"></script>
index.js
Map = null;
function init() {
var mapOptions = {***};
Map = new google.maps.Map( document.getElementById( "map_canvas" ), mapOptions );
}
Thanks for your time!
Map is reserved word in EcmaScript, so you shouldn't use it as a variable name: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
The problem is this line (jsfiddle thinks Map is read only):
Map = null;
Rename your map variable to something else (like map, with a lower case "m").
proof of concept fiddle
code snippet:
map = null;
function init() {
var mapOptions = {
center: {
lat: 0,
lng: 0
},
zoom: 1
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, "load", init);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
This is a problem with the weekly version of maps this week. I changed:
...//maps.googleapis.com/maps/api/js?key....
to
...//maps.googleapis.com/maps/api/js?v=3.34&key...
the first path server the weekly version of maps which is default.
I chose it to set the version to 3.34 which worked fine. I could have chosen a quarterly version which would update automatically to the version of the current quarter(it would automatically update next quarter) by inserting v=quarterly. Either way the 3.34 fixed my issues.
the browser says that google.maps is not defined
var marker = new google.maps.Marker({
position: center,
map: map,
title: 'Hello World!'
});
marker.setMap(map);
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxawz_fpkdpvsMZm_PozrDBznq7ph7bk0&callback=initMap"
></script>
</body>
</html>
you dont have to write as you have already mentioned map:map in the marker
marker.setMap(map);
the error google.map is not defined comes when javascript does not have its resources make sure your google key is initialised before writing this code
Put all the code that depends on the (asynchronously loaded) Google Maps Javascript API v3 inside the initMap (callback) function.
html,
body,
#map {
height: 100%;
width: 100%;
}
<script>
window.initMap = function() {
var center = new google.maps.LatLng(40.7127837, -74.0059413);
var map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 8
});
var marker = new google.maps.Marker({
position: center,
map: map,
title: 'Hello World!'
});
marker.setMap(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map"></div>
I have a component called foo
I have foo.html in apps/foo/components/content/foo/foo.html
currently this file contains the following.
<div data-sly-use.ev="Foo"
class="${ev.cssClass || ''}"
title="${ev.title || ''}"
data-emptytext="Foo Asset">
${ev.html # context='unsafe'}</div>
I have Foo.java in apps/foo/components/content/foo/Foo.java
that has getCssClass(), getTitle(), getHtml() needed by foo.html.
The above works fine
Question
When the user adds this component to the page, I want it to include a google map in the page. The lat/long to the google map will be provided by Foo.java#getLat() and Foo.java#getLong()
How can I do this?
I have the google map working in an HTML outside of AEM and the code is pretty simple:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
the lat/long values for myLatlng variable in the above javascript will need to come from Foo.java.
If you want to pass parameters to a script you can do as they generally do in Coral UI via data-xxx attributes in the Sightly script.
Set the property from your Foo into a data attribute in some DIV you will later fetch in JS.
Get the div in JS via its ID and obtain the data attributes you are interested in.
Example:
Sightly
<div id="map_canvas" data-lat="${ev.lat}" data-long="${ev.long}">
</div>
Javascript
this.mapCanvas = document.getElementsByClassName("map_canvas")[0];
var lat = $mapCanvas.data("lat");
var long = $mapCanvas.data("long");
var myLatlng = new google.maps.LatLng(lat,long);
I hope this helps! :)
I have already pointed my office location in google map.
Also I created API key.
Now i using embeded code to show google map location in my contact page.
I want to replace the same with AP key.
How to show my office location using Google Maps JavaScript API v3.
Following is my test.html page for checking the map. Which parts need to modify to show my location ?
You can see my location in below url
google(dot)com/maps?ll=9.965156,76.290034&z=14&t=m&hl=en-US&gl=US&mapclient=embed&cid=9383043750302267720
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my key already added here">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -9.959238, lng: 76.275271},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Sounds like you want to add a marker
Code below is for your initialize function based on the docs but w/ your Lat,Lon and zoom level.
var myLatlng = new google.maps.LatLng(9.965156,76.290034);
var mapOptions = {
zoom: 8,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World"
});
The marker's title (i.e. "Hello World" in the example above) will appear as a tooltip. If you don't want a tooltip, you can remove that line.