can't seem to make this works
function initialize() {
var myLatlngBDG = new google.maps.LatLng(-6.913947, 107.633825);
var mapOptionsBDG = {
zoom: 5,
center: myLatlngBDG,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapBDG = new google.maps.Map(document.getElementById('map-BDG'), mapOptionsBDG);
var markerBDG = new google.maps.Marker({
position: myLatlngBDG,
map: mapBDG,
title: 'PT. Buana Citra Abadi Bandung'
});
};
google.maps.event.addDomListener(window, 'load', initialize);
the map itself is displayed, but the markes does not appear, and so is the title
according to this tutorial I need to write marker.setMap() to show marker, but as you can see I already write it
if the problem itself is not in the javascript then this might be the problem
the order including the script in HTML :
<html>
<<link rel="stylesheet" type="text/css" href="css/map.css"/>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8k-8ztQ6Vk34XP6OEBMZ7PryuMx8jjX8&callback=initMap"></script>
<script src="js/map.js"></script>
</html>
NEW PROBLEM
why is the map sometimes appears sometimes disappears? I mean when I refresh the page, it disappears, the I refresh several times and it re appears
It seems that everything is fine, take this code as an example and check yours maybe you find any difference
google.maps.event.addDomListener(window, "load", function () {
var myLatlngBDG = new google.maps.LatLng(-6.913947, 107.633825);
var mapOptionsBDG = {
zoom: 5,
center: myLatlngBDG,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapBDG = new google.maps.Map(document.getElementById("map-BDG"), mapOptionsBDG);
var markerBDG = new google.maps.Marker({
position: myLatlngBDG,
map: mapBDG,
title: 'PT. Buana Citra Abadi Bandung'
});
markerBDG.setMap(mapBDG);
});
#map-BDG{
width:500px;
height:300px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>Maps Example</h1>
<div id="map-BDG"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8k-8ztQ6Vk34XP6OEBMZ7PryuMx8jjX8"></script>
<script src="script.js"></script>
</body>
</html>
Related
I just can't understand why this simple example of MarkerManager shows no marker. I am opening a map at a center point and then adding one marker to the marker manager. When the map initializes there is no marker.
What am I missing?
Thanks, Rick
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
<script type="text/javascript">
var map;
var mgr;
function initialize() {
center = new google.maps.LatLng(40.1352891590710, -105.1035852680550)
var myOptions = {
zoom: 18,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
var marker = new google.maps.Marker({
position: center,
title: 'marker'
});
mgr.addMarker(marker);
mgr.refresh();
mgr.show();
alert(mgr.getMarkerCount(18));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="height: 800px;"></div>
</body>
</html>
The documentation tells me that addMarker takes two arguments:
addMarker(marker:Marker, minZoom:Number, opt_maxZoom:Number) | None | Add a single marker to the map.
change the call in your code to:
mgr.addMarker(marker, 0);
My Google map works okay but the mouseover and mouseout are not showing the div. Can anyone see my mistake or what I have done wrong? I have jquery installed on my host server.
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="jquery/jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var mapOptions = {
zoom: 12,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var marker_0 = new google.maps.Marker({
position:LatLng,
map:map,
descrip:contentstring,
link:'https://www.google.ie/'
})
google.maps.event.addListener(marker_0,'mouseover',function(){
tooltip.show(this.descrip);
});
google.maps.event.addListener(marker_0,'mouseout',function(){
tooltip.hide();
});
google.maps.event.addListener(marker_0,'click',function(){
window.open(this.link);
});
}
$(document).ready(function(){
initialize();
})
</script>
</head>
<body>
<div id="map-canvas" style="width:600px;height:400px;border:solid 1px red;"></div>
</body>
</html>
Thanks in advance for any help.
From the code above, It doesn't look like you have defined the variable 'tooltip'
Instead of passing descrip and link properties to your marker_0, try just passing the title and it works. Like this...
function initialize() {
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var mapOptions = {
zoom: 12,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';
var marker_0 = new google.maps.Marker({
position:LatLng,
map:map,
title: contentstring
//descrip:contentstring,
//link:'https://www.google.ie/'
})
/*
** HAVE COMMENTED THIS BIT OUT AS THE MARKER ABOVE WILL WORK AS A TOOL TIP **
google.maps.event.addListener(marker_0,'mouseover',function(){
tooltip.show(this.descrip);
});
google.maps.event.addListener(marker_0,'mouseout',function(){
tooltip.hide();
});
google.maps.event.addListener(marker_0,'click',function(){
window.open(this.link);
}); */
}
There is a Simple Marker Exmaple Here
The properties that can be used for the marker is listes in the DOCS.
Hope this helps.
Good afternoon,
I am developping a javaFX application and now I want to include on it a map using google maps
I have successfully dispaly the map on javaFX using this code on a html file
<!DOCTYPE html>
<html>
<head>
<title>Java-Buddy: Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>#mapcanvas { height: 360px; width: 100%}</style>
</head>
<body>
<h1>Java-Buddy: Google Maps</h1>
<div id="mapcanvas">
<script type="text/javascript">
var latlng = new google.maps.LatLng(35.857908, 10.598997);
var Options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), Options);
//var carMarkerImage = new google.maps.MarkerImage('resources/images/car.png');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.857908, 10.598997),
map: map,
draggable: false,
//icon: carMarkerImage,
title: "",
autoPan: true
});
</script>
</div>
</body>
</html>
I want to set the postition of the map using the controller class
I can do it with this event code
public void handle(ActionEvent actionEvent) {
webEngine.executeScript("document.myFunction(longitude, latitude)");}
I am new on javascript, and I want to know how to write the javascript function that allow me to set or to change the current position on the map
Thank you
function myFunction(longitude, latitude){
map.setCenter(new google.maps.LatLng(latitude, longitude));
}
I followed a sample code to create a fusion tables map with 'heatmap' (hotspots as I called it) but it's not working. Could someone take a look on it, please?
I don't know whether the problem is with some syntax element (but the code didn't break) or with the form element? Another possibility could be that there are just a few points, and it's not possible to produce a heatmap only with that points. But I never heard of such a technical issue.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(0, 0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'ENDERECO_GOOGLE'",
from: 3767057
},
map: map
});
google.maps.event.addDomListener(document.getElementById('heatmap'),
'click', function() {
var heatmap = document.GetElementById('heatmap');
layer.setOptions({
heatmap: {
enabled: heatmap.checked
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
<input id="heatmap" type="checkbox" />
<label>Hotspots</label>
</div>
</body>
</html>
You've got 2 syntax errors in the file you posted.
document.GetElementById();
// must be
document.getElementById();
and
layer.setOptions()
// must be
layerl0.setOptions()
Message: '_e3' is null or not an object
Line: 19
Char: 1068
Code: 0
URI: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/6/6/main.js
I really have no clue on javascript and this is someone elses code, but does anyone know why it causes the above error in internet explorer?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Animations</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;
google.maps.event.addListener(marker, 'drag', function(event){
document.getElementById("latbox").value = event.latLng.lat();
document.getElementById("lngbox").value = event.latLng.lng();
});
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: stockholm
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: parliament
});
google.maps.event.addListener(marker, 'drag', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
document.getElementById("latbox").value=marker.getPosition().lat();
document.getElementById("lngbox").value=marker.getPosition().lng();
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
Lat:<input type="text" id="latbox" name="latbox" style="width:100px;" >
<br>
Long:<input type="text" id="lngbox" name="lngbox" style="width:100px;" >
</body>
</html>
If you open IE's developer tools, change to the script tag, and start debugging, then when the page refreshes and the error occurs, the developer tools will show a call stack headed by your call to add a listener to the drag event of a marker, and the __e3_ being referenced is a property of the marker, but you have not created the marker.
Move the addListener(marker ... call to within the initialize() function, after you've created the marker.