I'm using the Google Maps API V3 and I'm trying to make a marker move across the screen. Here's what I have:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(50,50);
var myOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
image = 'bus.gif';
marker = new google.maps.Marker({position: myLatLng, map: map, icon: image});
marker.setMap(map);
}
function moveBus()
{
// Move Bus
}
</script>
</head>
<body onload="initialize()">
<script type="text/javascript">
moveBus();
</script>
<div id="map_canvas" style="height: 500px; width: 500px;"></div>
</body>
</html>
Now what I've tried is replacing // Move Bus with
marker.setPosition(new google.maps.LatLng(0,0));
But that didn't do anything. That's the command I saw on the API reference. I'm also relatively new to Javascript, so it might be a JS error on my part.
This question is related to
javascript
google-maps-api-3
move
google-maps-markers
Just try to create the marker and set the draggable property to true.
The code will be something as follows:
Marker = new google.maps.Marker({
position: latlon,
map: map,
draggable: true,
title: "Drag me!"
});
I hope this helps!
Here is the full code with no errors
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
#map-canvas
{
height: 400px;
width: 500px;
}
</style>
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng( 17.3850, 78.4867 ),
myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),
marker = new google.maps.Marker( {icon: {
url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
}, position: myLatLng, map: map} );
marker.setMap( map );
moveBus( map, marker );
}
function moveBus( map, marker ) {
setTimeout(() => {
marker.setPosition( new google.maps.LatLng( 12.3850, 77.4867 ) );
map.panTo( new google.maps.LatLng( 17.3850, 78.4867 ) );
}, 1000)
};
</script>
</head>
<body onload="initialize()">
<script type="text/javascript">
//moveBus();
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=AIzaSyB-W_sLy7VzaQNdckkY4V5r980wDR9ldP4"></script>
<div id="map-canvas" style="height: 500px; width: 500px;"></div>
</body>
</html>
use panTo(x,y).This will help u
You are using the correct API, but is the "marker" variable visible to the entire script. I don't see this marker variable declared globally.
<style>
#frame{
position: fixed;
top: 5%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 8px 8px;
width: 98%;
height: 92%;
display: none;
z-index: 1000;
}
#map{
position: fixed;
display: inline-block;
width: 99%;
height: 93%;
display: none;
z-index: 1000;
}
#loading{
position: fixed;
top: 50%;
left: 50%;
opacity: 1!important;
margin-top: -100px;
margin-left: -150px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 8px 8px;
max-width: 66%;
display: none;
color: #000;
}
#mytitle{
color: #FFF;
background-image: linear-gradient(to bottom,#d67631,#d67631);
// border-color: rgba(47, 164, 35, 1);
width: 100%;
cursor: move;
}
#closex{
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
cursor: pointer;
}
.pointer{
cursor: pointer !important;
}
</style>
<div id="loading">
<i class="fa fa-circle-o-notch fa-spin fa-2x"></i>
Loading...
</div>
<div id="frame">
<div id="headerx"></div>
<div id="map" >
</div>
</div>
<?php
$url = Yii::app()->baseUrl . '/reports/reports/transponderdetails';
?>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function clode() {
$('#frame').hide();
$('#frame').html();
}
function track(id) {
$('#loading').show();
$('#loading').parent().css("opacity", '0.7');
$.ajax({
type: "POST",
url: '<?php echo $url; ?>',
data: {'id': id},
success: function(data) {
$('#frame').show();
$('#headerx').html(data);
$('#loading').parents().css("opacity", '1');
$('#loading').hide();
var thelat = parseFloat($('#lat').text());
var long = parseFloat($('#long').text());
$('#map').show();
var lat = thelat;
var lng = long;
var orlat=thelat;
var orlong=long;
//Intialize the Path Array
var path = new google.maps.MVCArray();
var service = new google.maps.DirectionsService();
var myLatLng = new google.maps.LatLng(lat, lng), myOptions = {zoom: 4, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var poly = new google.maps.Polyline({map: map, strokeColor: '#4986E7'});
var marker = new google.maps.Marker({position: myLatLng, map: map});
function initialize() {
marker.setMap(map);
movepointer(map, marker);
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
}
function movepointer(map, marker) {
marker.setPosition(new google.maps.LatLng(lat, lng));
map.panTo(new google.maps.LatLng(lat, lng));
var src = myLatLng;//start point
var des = myLatLng;// should be the destination
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
;
// function()
setInterval(function() {
lat = Math.random() + orlat;
lng = Math.random() + orlong;
console.log(lat + "-" + lng);
myLatLng = new google.maps.LatLng(lat, lng);
movepointer(map, marker);
}, 1000);
},
error: function() {
$('#frame').html('Sorry, no details found');
},
});
return false;
}
$(function() {
$("#frame").draggable();
});
</script>
Source: Stackoverflow.com