I'm trying to have this done using Google Maps API. I tried several javascript plugins such as components from google-maps-utility-library-v3 but nothing seems really done for this purpose.
Basically what I'm trying to do is to have one shadow layer, one user's picture layer and over it one layer for the marker image. My marker image has a transparent hole in it, so I'd like the user's face to be shown in that hole which is why I'm trying to do this.
What I have right now is pretty simple:
var shadow = {
url: '/data/images/map/pin_shadow.png',
size: new google.maps.Size(108, 95),
anchor: new google.maps.Point(30, 47)
};
var image = {
url: '/data/images/map/pin.png',
size: new google.maps.Size(60, 95),
anchor: new google.maps.Point(30, 47)
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(venue.lat, venue.lng),
map: map,
icon: image,
shadow: shadow
});
I was wondering if anyone has ever did this?
EDIT: I'd better like a client-side solution though. Thanks
I wish I could add another image between the shadow and the image. Any idea?
Thanks and have a nice day!
You could try something like this :
create pin images on the fly from PHP/.NET/JSP/...
var image = {
url: 'my_script.php?user=12345',
size: new google.maps.Size(60, 95),
anchor: new google.maps.Point(30, 47)
};
I don't know which language you use so here's a script pseudo-code :
Set headers to print script as image
if image exists for specified user :
return this image;
else
create image for user with the 3 layers
return image
end if
Related
I'm writing a Python Flask application in which I'm using Google Maps. I want to be able to add labels to a polyline that I've drawn which symbolizes a ship route.
The route is drawn using a set of coordinates and the polyline feature of the Maps API. I want to add time labels to the polyline and the easiest way seems to be to use Map Markers. However I don't want the large standard pins to show up, but would prefer a small icon/marker together with my text or even none at all. As far as I have gathered you can create "Circles" (which are modifiable) or "Markers" (which you only can change the icon of). I would prefer to go with "Circles", but those you apparently can't add text to..
How can I add text to my map and avoid the Google Maps Pins showing up?
Currently I have an list of objects that contains latitude, longitude and date + time. I'm iterating through it adding markers, but as I do I would like to keep out the marker icon or instead draw the circles if someone knows how to draw circles with added text?
for(i = 0; i < markerList.length; i++){
var position = new google.maps.LatLng(markerList[i].lat, markerList[i].lng);
var date = markerList[i].date;
var marker = new google.maps.Marker({
position: position,
label: date,
map: map,
icon: "None" //Produces error: 404 (NOT FOUND)
});
}
Being able to change the label size also is a very much appreciated function, but I have been unable to find any information about whether that is available. Being able to change the color of the text would also be nice.
As no answers have been given yet and I've sort of found a solution to my problem I guess I will share for others out there with the same problem. At least until someone comes up with a better solution:
I ended up using a predefined symbol and scaling it down to 0 in size as follows:
for(i = 0; i < markerList.length; i++){
var position = new google.maps.LatLng(markerList[i].lat, markerList[i].lng);
var date = markerList[i].date;
var marker = new google.maps.Marker({
position: position,
label: date,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 0
}
});
}
Sadly I haven't found a way to mess with the label yet.
try markerWithlabel and you can change the icon of the marker whit a svg or png plus the label too
like this jsfiddel
.
#Zeliax You can add visible: false to not have marker icon show on your google map. icon prop looks for a path that you want specify for your marker to look as. It is basically a url for your display image.
Please let me know how to move customized google map marker above the latitude and longitude point?
Here is the JSBIN : Link, here i have used three object arrays, just used this link to understated the coding structure,
Please let me know where i have to insert "anchor" to position customized icon?
You can use the anchor property of the icon object and add any offset you need for the marker image.
var iconObj = {
url: '/path/to/icon.png', //path to icon image
origin: new google.maps.Point(0, 0), //position of the image within a sprite
anchor: new google.maps.Point(25, 25), //position at which to anchor an icon in correspondance to the position of the marker
};
var markerObj = new google.maps.Marker({
position: point,
map: map,
icon: iconObj
});
Update:
To answer your second question 'where do I put this exactly in my code' - you should put icon as an object in drivers array instead of a string.
Here's modified working version of your code
I have a map on which I display public transit stops. I would like to color code those stops according to various parameters. I would also like to use my own icon. I have figured out how to take a png image and change its color in javascript, but I'm not sure how to get the Google Map to use it as the Marker image.
I've seen the Styled Marker library but as far as I can tell, you can't use your own image with it--and from an (admittedly cursory) look at its source, I don't think I can change it to use my image as it seems to use URL parameters with a set of default markers to achieve the color change.
Any suggestions?
You want something like this:
marker = new google.maps.Marker({
draggable: false,
raiseOnDrag: false,
icon: {
size: new google.maps.Size(32, 42),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(15, 42),
url: // path to png
},
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(lat, lng),
map: map
});
Here's the full documentation.
We're re-writing a Flash application that uses Google Maps into an HTML/CSS/JavaScript with the v3.10. In Flash they used an mx effect to create a pulsating glow of different colors to indicate status.
I've been trying to find a way to replicate this in JavaScript, but I haven't been able to find a solution.
I've played around with shadow, but then it's only a png image. Ideally I'd like to use CSS, or a JavaScript tool, but maybe I could use an animated gif behind the marker?
createMarker = function (mapMarkerVm) {
var shadow = new google.maps.MarkerImage(
'/Content/images/mapIcon_glow.png',
new google.maps.Size(36, 52),
new google.maps.Point(0, 0),
new google.maps.Point(20, 52));
return new google.maps.Marker({
title: mapMarkerVm.Title() || "",
position: new google.maps.LatLng(mapMarkerVm.Latitude() || 0.0, mapMarkerVm.Longitude() || 0.0),
icon: createMarkerImage(mapMarkerVm.StatusIcon()),
map: map,
shadow: shadow,
draggable: false,
visible: true
});
};
You could use a gif but you must set optimized: false in your marker constructor.
Source:
.gif marker google maps
Hi all I need to update google markers position every 5sec
I have this javascript code for drawing a google markers when page loads.
I want to be able to change position of the markers every 5 sec.
Here is my code:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var image = new google.maps.MarkerImage("images/truck3.png",
new google.maps.Size(32.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(16.0, 18.0)
);
var shadow = new google.maps.MarkerImage("images/shadow-truck3.png",
new google.maps.Size(51.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(16.0, 18.0)
);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: image,
shadow: shadow,
title: 'Click to zoom'
});
google.maps.event.addDomListener(window, 'load', initialize);
One more thing how can I put multiple points when showing more then one marker.
I know this is probably trivial for you but I am totally new at this.
EDIT:
I am sorry but this google got me tottaly confused. So What I want to do is next. When page loads I want to retrieve and array of last positions and each of that positions will have their id so an php array would be like array[Lat][Lng][id], after that I would like to put and marker on each of that position and put it in the center of the screen. When user clicks on one marker it will automatically zoom and start putting the marker position in the center every second. And I need an id for that certain marker.
This is a similar question, it would be nice if some java guru can combine me those to to get what I need
LINK ON THE SIMILAR QUESTION
well you can get lot of support for your queries GOOGLE MAPS API V3 Documentation
there are functions like
setCenter(latlng) that changes center on run time and also the function setPosition(latlng:LatLng) to change the center of marker by this way you can change the position of your marker runtime. and for storing last locations you can use a database for it and update it as according to your requirement.
This google.maps.Marker method allows you to change the position of existing markers:
visit here setPosition(latlng:LatLng)
Create an array of the markers, loop through it updating their position.
Add this javascript function to your code ,
$(function () {
setTimeout(function () { $('#map_canvas').load(initialize); }, 50000);
})