How to change maker icon - google-maps-api-3

I want to change the marker icon when the clock reaches 10 PM and go back to same icon when 6 AM .. how do I pick the right time of the clock from somewhere? and how to put the icon to change such a time
thanks !!
my code
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-22.968015,-43.183161),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP });
var green = 'images/VERDE.png';
var yellow = 'images/AMARELO.png';
var red = 'images/VERMELHA.png';
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-22.967311,-43.186073),
icon: green});

The following code changes the the marker according to time.
var now=new Date().getUTCHours();
now -= 2;//Set for Rio Adjust to your time zone
var startTime = 22;//10 PM
var finishTime = 6;//6 AM
var icon;
function initialize() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-22.968015,-43.183161),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP });
var green = 'images/green.png';
var yellow = 'images/yellow.png';
var red = 'images/red.png';
//Choosing icon by time
if(now >= finishTime&&now < startTime){
icon = green;
}else {
icon = red;
}
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-22.967311,-43.186073),
icon: icon});
}
Points to note.
Only works in one time zone.
You will need to alter now -= 2 to suit local time with winter saving if required.
The boundry values may require tuning.

Related

How to disable Google Map MouseOver

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
});

Show data when Google Maps marker is clicked in markercluster

I am trying to work out how to show custom data when a Google Maps markerclusterer marker is clicked but can't find this documented anywhere.
My markerclusterer code looks like this but my attempt at capturing the click event on a marker is not working:
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
google.maps.event.addDomListener(window, 'load', initialize);
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
/*
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
icon: markerImage
});
markers.push(marker);
}
*/
for (var i = 0; i < numItemsToShow; ++i) {
var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long);
var marker = new google.maps.Marker({
position: latLng,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom == -1 ? null : zoom;
size = size == -1 ? null : size;
style = style == -1 ? null: style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP,
//styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"on"},{"color":"#052366"},{"saturation":"-70"},{"lightness":"85"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":"-53"},{"weight":"1.00"},{"gamma":"0.98"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"},{"lightness":"0"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"hue":"#3dff00"},{"saturation":"-100"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"saturation":"-18"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#57677a"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"lightness":"40"}]}]
styles: [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#b5cbe4"}]},
{"featureType":"landscape","stylers":[{"color":"#efefef"}]},
{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#83a5b0"}]},
{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#bdcdd3"}]},
{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"}]},
{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e3eed3"}]},
{"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]},
{"featureType":"road"},
{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{},
{"featureType":"road","stylers":[{"lightness":20}]}]
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
google.maps.event.addListener(markerClusterer, 'click', function () {
// do something with this marker ...
this.setTitle('I am clicked');
});
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
This works for me (it opens an infowindow when you mouseover the cluster icon, if you click on the cluster icon, the default behavior is to zoom to the cluster bounds, which makes it hard to see the change of the tooltip/title on the cluster icon):
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(markerClusterer, 'mouseover', function (cluster) {
// do something with this cluster ...
infoWindow.setContent("Mouseover<br>"+cluster.getCenter().toUrlValue());
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(map);
});

Fit bounds Google Maps API issue

I'm trying to show a marker on a map with set coordinates and then show the users geolocation in relation to the marker. I'm able to show both the marker and geo location (if available) on the map but the map is only positioned on the geo location. I think I need to use fitBounds to fit both markers in view but I can't get this to work. Can anyone help?
function initialize() {
var latitude = 51.5039713;
var longitude = -0.114518;
var mapCanvas = document.getElementById('map-directions');
var center = new google.maps.LatLng(latitude, longitude);
var zoom = 18;
var mapOptions = {
center: center,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(mapCanvas, mapOptions)
marker = new google.maps.Marker({
map:map,
animation: google.maps.Animation.DROP,
position: center,
icon: '/pickup.png'
});
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var bounds = new google.maps.LatLngBounds();
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var geolocation = new google.maps.Marker({position: pos, map: map, title: 'Your geolocation', });
bounds.extend(geolocation.getPosition());
map.fitBounds(bounds);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
initialize the bounds with the position of marker as argument:
var bounds = new google.maps.LatLngBounds(center);
Related to the comment:
To have both markers in viewport but 1 in center you may:
create a circle` with:
pos as `center
the distance between pos and center as radius
call map.fitBounds() by using the bounds of the circle as argument
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
circle = new google.maps.Circle({center:pos,
radius: google.maps.geometry.spherical.computeDistanceBetween(pos,center)}),
geolocation = new google.maps.Marker({position: pos, map: map, title: 'Your geolocation'});
map.fitBounds(circle.getBounds());

Create Marker Categories & Display Markers on Click Only

I am trying to create marker categories and display markers on click...
For example, "Eat", "Banks", "Places of Interest" and clicking on them would produce only the markers in those categories. You can see it live HERE
Here is a code snippet:
//<![CDATA[
//<![CDATA[
var map = null;
var gmarkers = [];
var gicons = [];
var icon = [];
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(37.979183,-121.302381),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
///////////////////////// EATS //////////////////////////////////////////////
var point = new google.maps.LatLng(37.988012,-121.311901);
var image = 'icons/orangepointer.png';
var marker = createMarker(point,'<div style="width:205"><center><img src="icons/tigeryogurt.jpg" /></center><br><b>Tiger Yogurt</b><small><br>4343 Pacific Avenue<br>209.952.6042<br><br><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a></small><\/div>', image);
// this will be gmarkers[0]
var point = new google.maps.LatLng(37.987054,-121.311655);
var image = 'icons/orangepointer.png';
var marker = createMarker(point,'<div style="width:205"><center><img src="icons/mwbakery.jpg" /></center><br><b>M&W Bakery<br>Cakes & Sandwiches</b><small><br>4343 Pacific Avenue<br>209.473.3828<br><br>On the web visit:<br><a href="http://www.mandwdutchamericanbakery.com" target ="_blank">MandWDutchAmericanBakery.com<\/a><br><br><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a></small><\/div>', image);
// this will be gmarkers[1]
Currently, all markers display. I can easily get the markers not to display... however, i am trying to have only categories display and individual listings to display on click only!
CREATE MARKER FUNCTION:
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function triggerClick(i) {
google.maps.event.trigger(gmarkers[i],"click")
};
function createMarker(latlng, html, img) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: img,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
gmarkers.push(marker);
}
I would think the simplest way to do it would be to assign your markers to arrays, with each marker upon creation having setMarker(null). You'd either use a separate array for each category, or a single array of objects each with a category attribute. Then when the user clicks on a category you would iterate through the appropriate array and setMarker(map) for each of its markers.

Google Maps API v3 port

I am trying to port my google api v2 to v3 but it does not work....i get an "Polyline is not defined" error... :/ the old Polyline is GPolyline and the new is new google.maps.Polyline
https://developers.google.com/maps/documentation/javascript/overlays?hl=de-DE#Polylines
var map = "";
var mapConfig = "";
var mapElements = "";
var curActiveMenuButton = "";
var clickHandlerElementCount = "";
//window.onload = function() {
//window.addEvent('domready', function() {
//document.addEvent('domready', function() {
//alert("The DOM is ready.");
//initializeMap();
//});
/*
* function initializeMap()
*
* Initalisierung der Google-Map.
*/
function initializeMap(){
// Karte ins DOM einhängen
map = new google.maps.Map($('map_canvas'), myOptions);
//place the map on the canvas
//map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var latlng = new google.maps.LatLng(51.05758110879136, 10.451431274414062);
// default zoomlevel and center point
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
mapTypeControl: true,
scaleControl: true,
};
// default zoomlevel and center point
var encodedPolyline = new google.maps.Polyline();
// find bounding polyline and recalculate map center
for (var i = 0; i < mapElements.length; i++) {
if (mapElements[i]['titel'] == "nationalparkhainich") {
encodedPolyline = Polyline.fromEncoded({
points: mapElements[i]['pol'],
levels: mapElements[i]['lev']
});
mapCenter = encodedPolyline.getBounds().getCenter();
i = mapElements.length;
}
}
// Kartenmenue initialisieren
//initializeMapMenue();
}
Polyline is indeed not defined. You use it here:
encodedPolyline = Polyline.fromEncoded({
Version 3 doesn't include fromEncoded() — it appears that you need to use the geometry library (which needs to be explicitly loaded separately) and
encodedPolyline.setPath(
google.maps.geometry.encoding.decodePath(mapElements[i]['pol'])
);
[split on to separate lines here for clarity]

Resources