I am using google map API V3. i want to use a custom marker instead of that red marker. Earlier the code was
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// display map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if(display_marker) {
// create a map marker
var marker = new google.maps.Marker({
map: map,
position: latlng
});
}
but for the custom marker, i changed the code to
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// display map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// create a map marker
var image = 'imgs/pin.png';
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: image
});
but yet this is not working.
The image path is likely incorrect but,
You could also eliminate var image and just define the icon under var marker depending on your situation.
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: 'imgs/pin.png',
});
Your code looks okay.
Perhaps the image path is off.
Try putting the pin.png in the same folder as the map and then changing the
var image = 'imgs/pin.png';
to
var image = 'pin.png';
If it works, then you need to revise the path, probably to something like
var image = '/imgs/pin.png';
or
var image = '../imgs/pin.png';
Related
I am making an aspx page to track vehicles. The only thing I am sticking with is that I don't know how to remove tooltip text from google markers.
The data is displaying correctly.
In the image above, (1) is being shown when I am taking my cursor on marker image and (2) is coming when I am clicking on the marker.
I want to hide (1). How to do that?
I am using the following code:
function initMap() {
var image = '../images/FireTruck.png';
var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: image
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.title);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
Don't set the title property of the marker (that is what sets the tooltip).
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title, // <<<<<<<<<<<<<<<<<< REMOVE THIS
icon: image
});
Im building a web app in order to show a marker in the users current location using geolocation and GPS. Here is my code
var marker;
$(window).load(function() {
myOptions = { zoom: 20, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var watchId = navigator.geolocation.watchPosition(centerMap);
});
function centerMap(location)
{
var myLatlng = new google.maps.LatLng(location.coords.latitude,location.coords.longitude);
map.setCenter(myLatlng);
map.setZoom(15);
$("#lat").text("Latitude : " + location.coords.latitude);
$("#lon").text("Longitude : " + location.coords.longitude);
//show current location on map
marker = new google.maps.Marker({
position: myLatlng,
map: map,
zIndex:1
});
navigator.geolocation.clearWatch(watchId);
}
This code works but it keep adding markers as the user changes location.
How i can show only one marker in the current users location?
Instead of generating a new marker each time centerMap is called simply update its position with marker.setPosition(myLatlng).
I'm trying to get my hands dirty on Google Maps API v3. But now I'm stuck with figuring out how to get the coordinates of a certain marker?
<script>
var homeLatlng = new google.maps.LatLng(16.61096000671, 120.31346130371);
var homeMarker = new google.maps.Marker({
position: homeLatlng,
map: map
});
var myOptions = {
center: new google.maps.LatLng(16.61096000671, 120.31346130371),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map =
new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//I know that I'm the one who set the coordinates for this,
// but how do I fetch it back?
$('#plot').click(function(){
homeMarker.setMap(map);
});
</script>
homeMarker.getPosition(); //returns a google.maps.LatLng object
I have a question relevant to Google Maps API. I am learning how to use the Google Maps API. I can just show the map in the div tag, but what I want is to be able to click on the map and show the marker and return the LatLng of the clicked point.
function initialize(v_lat,v_long,v_place) {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map( document.getElementById("map_canvas") , myOptions );
}
here is the click event example
where you click on map marker place on that point and click on marker which will return the latlng of that location.
try this
var marker;
google.maps.event.addListener(map, 'click', function() {
if(marker==null){
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
alert("latlng" + marker.getPosition());
});
}
});
here is the link for google map v3 you can find all tutorials related to the map
http://code.google.com/apis/maps/documentation/javascript/tutorial.html
http://code.google.com/apis/maps/documentation/javascript/events.html
If I already displayed a google map marker.
How could I change its icon using Jquery?
Thanks in advance.
Actually Google Maps API has supported method to setImage for marker. I get this code from Google Code PlayGround (http://code.google.com/apis/ajax/playground/#custom_marker_image_v3)
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(mapDiv, {
center: latLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}