I placed code on my website to show a map, it works but map only appears 1 second then disappears
Searched year and tried solutions that did not work
<div id="map"></div>
<script>
function initMap() {
var test= {lat: 42.988195, lng: -81.246134};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: test
});
var marker = new google.maps.Marker({
position: test,
map: map
});
}
</script>
<script async defer
src=
"https://maps.googleapis.com/maps/api/js?key=(KEY)&callback=initMap">
</script>
Open developer tools at your page.
If you use Google Chrome, Menu > View > Developer > JavaScript Console.
There is message from Google Maps API "RefererNotAllowedMapError"
Related
I was just playing around trying to do something with Google maps api in html however I ran into an issue. I am currently trying to place markers at specific positions, specifically customized markers that show as images not the regular markers however I can not figure out the code to do so. Currently this is an example of what I have attempted doing:
<html>
<head>
<title>Advanced map</title>
<script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script>
function init() {
blatlng = new google.maps.LatLng(41.275890,-73.874195);
myOptions = {
zoom: 5,
center: blatlng,
mapTypeId: google.maps.MapTypeId.Map };
map = new google.maps.Map(document.getElementById("italy"), myOptions);
blatlng1 = new google.maps.LatLng(-6.155889,106.640180);
myOptions1 = {
zoom: 4,
center: blatlng1,
mapTypeId: google.maps.MapTypeId.Map };
map = new google.maps.Map(document.getElementById("home"), myOptions1);
var marker = new google.maps.Marker({
position: blatlng,
icon: "jess1.jpg"
});
marker.setMap(map);
}
</script>
</head>
<body onLoad="init();">
<div id="italy" style="width:500px; height:300px"></div>
home
<div id="home" style="width:500px; height:300px"></div>
</body> </html>
This is the specific section where I am trying to place the custom marker however this also only calls the initial coordinates if it did work I just want to be able to place an image marker anywhere on either map:
var marker = new google.maps.Marker({
position: blatlng,
icon: "jess1.jpg"
});
marker.setMap(map);
}
I am facing problem related to Google map. First time when page load It show google map but If I re-lode page again google map not shown on page.Any body have Idea about this problem.
Thanks.
You Can do this way :
<div id="map" style="width:400px;height:400px;background:yellow"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
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.
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.
So these Google Maps were working fine and then all of a sudden they weren't. The only change I made was uploading new images for the markers. Upon inspection I can see that the new markers are loading properly and the console produces no errors (Chrome and FF). I have tried flipping the sensor between true and false, also with no luck. When I removed the sensor attrib it kicked back the standard alert error of needing it.
Am I missing something simple?
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false">
</script>
<script type="text/javascript">
var wildbasin = new google.maps.LatLng(30.310716, -97.824238);
var seucampus = new google.maps.LatLng(30.229723, -97.755275);
var austin = new google.maps.LatLng(30.275079, -97.792053);
var basinm = 'http://www.test.stedwards.edu/sites/default/files/wildbasinmarker_1.png';
var campusm = 'http://www.test.stedwards.edu/sites/default/files/maincampusmarker_0.png';
var map;
function initialize() {
var myOptions = {
zoom: 12,
center: austin,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var campus = new google.maps.Marker({
position: seucampus,
map: map,
title:"St.Edward's University",
icon: campusm
});
var thebasin = new google.maps.Marker({
position: wildbasin,
map: map,
title:"Wild Basin",
icon:basinm
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
While the map will default to 100% width, you need to set a height for the containing div. For example, this will solve your issue:
<div id="map_canvas" style="height:400px;"></div>