I would like to ask you a solution for this problem.
I have a JS with a variable inside that is updated overtime by a JAVA application (i.e. JAVA writer into a thread), after that I take the coordinates from that variable and I create a new object Marker for my google maps. The problem is that the marker does not changes position, it changes only if I refresh the whole page (I dont want to do this).
Here's the code to be more clear.
The inputData.js where the variable is written by the java application
var newMarker = {'latitude':38.25705300000004,'longitude': 140.83760400000006};
my html page used to display the map
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEY">
</script>
<script type="text/javascript" src="inputData.js"></script>
<script>
var map;
var sendai = new google.maps.LatLng(38.259535, 140.846816);
var lastPosition;
var image = 'images/circle-16.png';
function initialize() {
var mapOptions = {
zoom: 12,
center: sendai,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
setInterval(refreshData, 2000);
function refreshData() {
var marker = new google.maps.Marker({
map: map,
icon: image,
draggable: false
});
marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setZoom(18);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
If I open my page like this everything work but when I change the script "inputData.js" the marker does not changes position.
The method setCenter on the other hand seems to work properly.
Help me please!
You'll need to reload the updated script to get the updated position:
function initialize() {
var mapOptions = {
zoom: 18,
center: sendai,
mapTypeId: google.maps.MapTypeId.ROADMAP},
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions),
//we will store the LatLng here
pos = new google.maps.MVCObject(),
//use a single marker with updated position
marker = new google.maps.Marker();
//set the latLng of the MVCObject
pos.set('latLng',new google.maps.LatLng(newMarker.latitude,
newMarker.longitude));
//bind the markers position to the latLng of the MVCObject
marker.bindTo('position',pos,'latLng');
marker.setMap(map);
setInterval(function(){
//the currently loaded script
var script=document.querySelector('script[src^="inputData.js"]'),
//the updated script
update=document.createElement('script');
//load-handler for the updated script
google.maps.event.addDomListenerOnce(update,'load',function(){
pos.set('latLng',new google.maps.LatLng(newMarker.latitude,
newMarker.longitude));
map.setCenter(pos.get('latLng'));
map.setZoom(18);
});
//replace current script with updated script
script.parentNode.replaceChild(update,script);
//load update
update.src='inputData.js?'+new Date().getTime();
},2000);
}
You don't need to create new instance of marker every time. Update your code with this and try:
var map;
var sendai = new google.maps.LatLng(38.259535, 140.846816);
var lastPosition;
var image = 'images/circle-16.png';
function initialize() {
var mapOptions = {
zoom: 12,
center: sendai,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
var marker;
marker = new google.maps.Marker({
map: map,
icon: image,
draggable: false
});
marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setZoom(18);
setInterval(refreshData, 2000);
function refreshData() {
marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setZoom(18);
}
google.maps.event.addDomListener(window, 'load', initialize);
Related
So I'm trying to implement Google maps on a website, and on my localhost it works fine, and I see it perfectly.
However when I upload this to my hosting company, the map doesn't show at all.
When I inspect the element and check the console, I don't see any errors.
Code is below:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(53.092975, -7.895479);
var mapOptions = {
center: myLatlng,
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'LCCEurotex'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I have no idea what could be causing it as my code looks the same as the one from the google documentation.
Any ideas on what could be causing it would be great.
Thanks for any help!
Move this portion of code to the footer page, Probably you has binding the map and div container is not property loaded, additionally, tray adding a heigth to the id map_canvas as default in your css.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo7nFkoUthlGms4De0miS4EPfupB5x0cY"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(53.092975, -7.895479);
var mapOptions = {
center: myLatlng,
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'LCCEurotex'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
In your CSS
div#map-canvas {
height: 500px !important;
}
Only add http:// to url of google maps api, change this line:
<script type="text/javascript" src="maps.google.com/maps/api/js?sensor=false"></script>
By this:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
I am trying to show markers on google map in a web page.
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
window.MY = {};
function test() {
addMarker(new google.maps.LatLng(88.4, 22.5));
}
function addMarker(myLatlng) {
var marker = new google.maps.Marker({
position: myLatlng,
map: MY.map
});
}
function initialize() {
var myOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
MY.map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
navigator.geolocation.getCurrentPosition(function(position) {
MY.map.setCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
});
google.maps.event.addListener(MY.map, 'click', function(event) {
addMarker(event.latLng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="height:380px;"></div>
<button onclick="test()">test</button>
</body>
</html>
When I click on the map, marker shows up, but when I click on test button, marker doesn't show up for the specified location(88.4, 22.5). Can someone please explain me the behavior.
The location google.maps.LatLng(88.4,22.5) is above the arctic circle. A latitude of 88.4 is very close to the north pole.
Perhaps you want google.maps.LatLng(22.5,-88.4) (in the Gulf of Mexico) or google.maps.LatLng(22.5,88.4) (Kolkata, India).
Replace your function test with
function test() {
var position = new google.maps.LatLng(88.4, 22.5)
addMarker(position);
MY.map.setCenter(position);
}
Your marker is falling outside map's viewport.
This is my entire code(just a test page). It shows the map but not the marker. How can I make it show the marker?
<!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 map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
The problem with your code is that you haven't defined any variable latLng and you are using it in marker. So obviously your code will not work. First define the latLng and then use.
Define it something like this:
var latLng = new google.maps.LatLng(44.5403, -78.5463);//Your marker coordinates.
and then use it in your code like:
var marker = new google.maps.Marker({
position: latLng,
map: map
});
Demo : http://jsfiddle.net/lotusgodkk/x8dSP/3520/
google.maps.event.addDomListener(window, 'load', initialize);
I've put a google map on a static page in my rails app. Upon initial load the map is fine but I don't know the right javascript to make it load on subsequent page loadings.
The code responsible:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(52.619885, -0.523137);
var mapOptions = {
zoom: 10,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Welcome!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Try
google.maps.event.trigger(map, 'resize');
This should refresh the map
I have a website here : www.hosting6280514.az.pl/ that uses SSL ... I try to display google maps on that page, but only the controls, markers and map/satellite switch is displayed, the actual map isn't. This is the code I'm using:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function refreshing() {
setTimeout("location.reload(true);",5000);
}
function initialize()
{
var position = new google.maps.LatLng(<?php echo$lat; ?>,<?php echo$lgt; ?>);
var mapOptions =
{
zoom: 18,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
/*var image = new google.maps.MarkerImage('http://hosting6280514.az.pl/pawel/images/car.png',
// This marker is 129 pixels wide by 42 pixels tall.
new google.maps.Size(129, 42),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(18, 42)
);*/
var marker = new google.maps.Marker(
{
position: position, // its position is where position variable points
title: "Car's position"
//icon: image
});
marker.setMap(map); // To add the marker to the map, call setMap();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="JavaScript:refreshing();">
<div id="map-canvas"></div>
</body>
</html>
Sorry, Question is: does anyone know why map is not displaying ?
In order to update the position on the map, try something along those lines.
You may also use geolocation.watchPosition if you would like to get the current position.
var position, marker;
function updateLocation() {
$.ajax({
url: '/something.php',
dataType: 'JSON',
success: function(data) {
position = new google.maps.LatLng(data.lat, data.lng);
marker.setPosition(position);
}
});
}
function initialize() {
position = // same as you have it
// ...
marker = // same as you have it
}