I am using JQuery mobile, HTML5 to develop a real time vehicle tracking application. I would like to know how to place a marker at the current location on a 'custom' map. I am using the getLocation function to get the current coordinates.
var mapOptions={
zoom:15
mapTypeControl: true;
navigationControlOptions:{style:google.maps.navigationControl.Style.Small}mapTypeID.ROADMAP};
map=google.maps.Map(document.getElementByID("map_container"),mapOptions);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "You Are Here!"
});
}
the google.maps.Map function loads a 'new' map. I would like to display the marker on a custom map.
you need to load the coords into a LatLng object before passing it to the marker.
eg
var myLatlng = new google.maps.LatLng(coords[0], coords[1]);
here coords[0] and coords[1] are float type latitudes and longitudes values.
after this pass the variable myLatlng inplace of coords in the marker.
This is some code i used in a project:
function CurrentPosition(){
getPosition(function(mylat, mylng){
drawPosition(mylat, mylng);
});
}
function getPosition(callback) {
navigator.geolocation.getCurrentPosition(function(position){
callback(position.coords.latitude, position.coords.longitude);
}, function(){
alert(texte['myPositionErrorAlert']);
},{enableHighAccuracy: false, timeout: 20000, maximumAge: 0});
}
function drawPosition(mylat, mylng){
LatLng = new google.maps.LatLng(mylat, mylng);
yourMarker = new google.maps.Marker({
position: LatLng,
map: map,
title:"MyPosition"
});
yourMarker.setMap(map);
}
Force the CurrentPosition funcition, the getPosition() will locate your position and the drawPosition() will create the marker.
Related
I have a Google Map on my website and I am also using a Custom marker to mark the location of the business. I want to bring the icon about 100px to the left as it's currently center of the map... How can I do this?
My code:
function initMap() {
var LatLng = {
lat: REMOVED, lng: REMOVED
};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: LatLng
});
var image = 'REMOVED';
var customMarker = new google.maps.Marker({
position: LatLng,
map: map,
icon: image
});
}
You've almost done. The problem is that you are centering the map in the same position than your marker.
So, set another LatLang for your marker or center the map in another position.
var markerLatLang={lat: WHATEVER, lng: WHATEVER}
var customMarker = new google.maps.Marker({
position: markerLatLang,
map: map,
icon: image
});
Checkout this for further information.
this is my google maps code
ı want to google maps marker stop
help me please !!!
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// initialize marker
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable: true,
map: map
});
//marker.forEach(function (marker) {
// marker.setMap(null);
//});
//marker = [];
// intercept map and marker movements
window.google.maps.event.addListener(map, "idle", function() {
marker.setPosition(map.getCenter());
var latitude = map.getCenter().lat().toFixed(6);
var longitude = map.getCenter().lng().toFixed(6);
window.google.maps.event.trigger(map, "resize");
getLocationAdressName(latitude, longitude);
marker.dragging.disable();
});
As dev8080 answered, if you want your marker to be not draggable at all then you should go with his answer.
But if you want your marker stop being draggable after some event replace
this:
marker.dragging.disable();
with this:
marker.setDraggable(false);
Initialize the pointer with draggable:false. To set the marker's center, you need not enable it's draggable attribute.
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable: false,
map: map
});
I have a problem with google maps api, when I change the marker position constantly, this leave a trace on map and I need move the marker without leaving a trace.
I actually get the latitude and the longitude from a database in firebase and need represent the route of a car.
var mapOptions = {
center: new google.maps.LatLng(20.615977, -103.339358),
zoom: 12
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
firebase.database().ref('route').on('value', function(data) {
var start = new google.maps.Marker({
position: {lat: latitud, lng: longitud},
map: map,
icon: '../icon/car.png'
});
var myLatlng = new google.maps.LatLng(data.val().latitude, data.val().longitude);
start.setPosition(myLatlng);
start.setMap(map);
});
You're creating a new marker in every event. Instead, create the marker before the event handler (and call setMap there), and in your handler, just do setPosition() to the data's new lat/lng.
i am trying to implement google map in chrome, however the geolocation doesn't seems to be working i also changed the setting to 'allow all site to track'
i have taken these code from a tutorial online, and hence i couldn't find a way to make it work
<head>
<title>Map</title>
<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function initGeolocation(){
if( navigator.geolocation ){
// Call getCurrentPosition with success and failure callbacks
navigator.geolocation.getCurrentPosition( success, fail );
}else{
alert("Sorry, your browser does not support geolocation services.");
}
}
var map;
function success(position){
// Define the coordinates as a Google Maps LatLng Object
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Prepare the map options
var mapOptions = {
zoom: 14,
center: coords,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the map, and place it in the map_canvas div
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//search for schools within 1500 metres of our current location, and as a marker use school.png
//placesRequest('Schools',coords,1500,['school']);
// Place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
}
function fail(){
// Could not obtain location
}
//Request places from Google
function placesRequest(title,latlng,radius,types,icon){
//Parameters for our places request
var request = {
location: latlng,
radius: radius,
types: types
};
//Make the service call to google
var callPlaces = new google.maps.places.PlacesService(map);
callPlaces.search(request, function(results,status){
//trace what Google gives us back
$.each(results, function(i,place){
var placeLoc = place.geometry.location;
var thisplace = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: icon,
title: place.name
});
})
});
}
</script>
initGeolocation() is not fired anywhere.
The div with id map_canvas is missing and you don't call initGeolocation function anywhere in your code .
Check here , everything works ok
The code in example 1 works. I would like to understand the marker.setIcon(); function more (new to JavaScript also).
My question is. In the documentation for Google maps you see something like this for changing the marker.
MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
How does this relate to what I have done in example 1 for setting up marker Icon, shoud I have done somethign like this instead?
marker = google.maps.MarkerImage({
url: "newIcon.png"
});
marker.setIcon(marker);
and would that have worked?
here is my example
Example 1
function initialize(){
//MAP
var latlng = new google.maps.LatLng('xxx','xxx');
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
//GEOCODER
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
marker.setPosition(latlng);
marker.setIcon("newIcon.png");
map.setCenter(latlng);
}
You're giving a V2 answer for a V3 question.
There is no GIcon in V3.
var image = new google.maps.MarkerImage("newIcon.png");
Can be used inside your marker as the icon.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
icon:image
});