create a google maps marker with javascript - google-maps

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>

Related

How to check google map API is fully loaded or not using setimeout function?

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.

Google Maps API not popping up

So I have a website: terpconnect.umd.edu/~ybencheq and I basically wanted to feature a Google Maps at the bottom of my page. I generated an API key and I have it passed in the key parameter. The URL's in my credentials are: https://terpconnect.umd.edu/~ybencheq/, https://www.terpconnect.umd.edu/~ybencheq/, .terpconnect.umd.edu/ and none of these will work. I get the RefererNotAllowedMapError and sometimes I don't even get an error in my console; it just turns up blank on that part of the page).
Here's what I have:
<!-- Add Google Maps -->
<script>
function myMap()
{
myCenter=new google.maps.LatLng(38.9869, 76.9426);
var mapOptions= {
center:myCenter,
zoom:12, scrollwheel: false, draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
And:
<script src="https://maps.googleapis.com/maps/api/js?key=[insertkeyhere]"
type="text/javascript"></script>

You need to call the myMap function somewhere. Either call it onload:
google.maps.event.addDomListener(window,'load',myMap);
Or in the call back of the API load:
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap&key=[insertkeyhere]" type="text/javascript"></script>
(but not both)
proof of concept fiddle
code snippet:
function myMap() {
myCenter = new google.maps.LatLng(38.9869, 76.9426);
var mapOptions = {
center: myCenter,
zoom: 12,
scrollwheel: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, "load", myMap);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>

How to Google Maps marker blink for time interval?

I am new at Google Maps technologies.I want to blink or bounce google maps marker for a time interval for example one minute.Is it possible to do it? Could you please show me a way to succeed it?

The google.maps.Marker class supports setAnimation(animation:Animation) method, which according to the docs:
Start an animation. Any ongoing animation will be cancelled. Currently
supported animations are: BOUNCE, DROP. Passing in null will cause any
animation to stop.
So you can just call
marker.setAnimation(google.maps.Animation.BOUNCE);
to start bouncing animation and
marker.setAnimation(null);
to stop it. Working example:
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
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!'
});
marker.setAnimation(google.maps.Animation.BOUNCE);
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body onload="initMap();" style="margin:0px; padding:0px;" >
<div id="map" style="height:400px; width:500px;"></div>
</body>
Blinking animation is not supported out of the box, but you can create it yourself, the example is already included in other answers.

may cause errors. (using googlemap without apikey)
var on = true;
var intervalSeconds = 0.5;
var myLatLng = {lat: -25.363, lng: 131.044};
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!'
});
setInterval(function() {
if(on) {
marker.setMap(null);
} else {
marker.setMap(map);
}
on = !on;
}, intervalSeconds * 1000);
#map {
width: 800px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map"></div>

I suggest for blinking maps marker you can use .gif file since google maps marker does not support blinking animation.
Just change the source of your image to .gif file and it will work.
for example.
var mapIcon= "/assets/mapIcon.gif");
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: mapIcon,
optimized: false
});
[NOTE] Don't forget to add optimized: false because sometimes it will not work properly.

Collaborative Realtime Mapping with Firebase Heatmap not working

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&region=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&region=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&region=BE&callback=initMap"
async defer></script>
proof of concept fiddle

Customizing google map with multiple markers and info window

*Hi there, i am new to the whole Google map api environment so please do guide me along.
What i am trying to achieve below is to extract data from either a XML file or a JSON file and plot the locations onto Google map. I am also trying to add a info window whereby it will show different information for each location. I understand that to have a info window, i would have to create a over lay. But the question is how do i actually tag multiple info-window to their markers ?
All markers are displayed well on the map, but the problem is when I click to see info window - info window is always displayed on the same marker. What's the problem?
This is what i have came up with so far and i would greatly appreciate if anyone is able to spot the issue.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
</style>
<script
src="https://maps.googleapis.com/maps/api/js sensor=false&libraries=visualization">
</script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(-27.48939, 153.012772),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week';
document.getElementsByTagName('head')[0].appendChild(script);
}
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var earthquake = results.features[i];
var coords = earthquake.geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: "<div>Hello! World</div>",
maxWidth:100
});
google.maps.event.addListener(marker, "mouseover", function() {
infowindow.open(map, marker);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

Use this instead of marker, when opening infowindow.
google.maps.event.addListener(marker, "mouseover", function() {
infowindow.open(map, this);
});