Using Google's example code for detecting a user's location, I setup a basic page that detects a user's location on a map. I also setup a separate page that drops a marker on a map at a specific coordinate. I want to combine these functions into one script. That is, I want to drop a marker on the map at the location detected, but I can't seem to get it to work. My code detects the user's location, but doesn't drop a marker. I'm sure it's something simple, but I'm not familiar with Javascript, so I'm having trouble resolving the problem.
Below is Google's example code. What would I need to add to display the marker at initialLocation? I tried adding the following code:
var marker = new google.maps.Marker({
position: initialLocation,
map: map,
title: "You are here"
});
Try calling setMap() after you've created the marker:
var marker = new google.maps.Marker({
position: initialLocation,
map: map,
title: "You are here"
});
marker.setMap(map);
Related
I'm trying to put a google.maps.Marker object over (z-index positioning) an Infobubble object
but i am having no success.
Basically what i'm doing is assigning zIndex: n to the markerOptions object which I pass to the Marker constructor as follow:
var markerOptions = {
position: store.getLocation(),
title: store.getDetails().title,
icon: DEFAULT_MARKER,
anchorPoint: new google.maps.Point(20,5),
zIndex: 2
};
var marker = new google.maps.Marker(markerOptions);
I have already read this answer Google Maps v3 marker over infowindow but actually it has not got any votes. Can somebody tell me more about?
Thanks a lot
The problem, as commented by shaunhusain is the fixed pane where particular elements will be drawn.
It's correct that you need to use a custom overlay, but you must use it to draw the marker, not the infobubble.
The reason: infobubble is an implementation of a custom overlay, it will be drawn inside the floatPane. To put the marker on top the infobubble must be drawn into a pane with a zIndex equal or lower than the zIndex of the pane where the marker will be drawn.
But here comes the problem: all these panes do not receive mouse-events, you wouldn't be able to interact with the infobubble(select tabs, select text, click links, close the infobubble).
Therefore you must use a custom overlay to draw the markers, and you must put these overlays into the floatPane(it's the pane with the highest zIndex)
Anyone know the URL to this icon, and if you can change the color on the most recent version of Google Maps API ?
I'd like a blue/green icon like below!
EDIT -----------------------------------------
I've found the markers here:
Markers With Text
scale = 2
text = AB
psize = 16
Green Marker
Red Marker
Google Development: Markers
You can custom everything with the API of google map.
To have a different pointer, you must add a specific code and give him the link to the icon you want to assign, and its position.
Something like this for exemple:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconBase + 'schools_maps.png'
});
Link to the documentation: https://developers.google.com/maps/tutorials/customizing/custom-markers
I hope it will be able to help you :)
I'm making a Map where my custom created marker will animate on Polyline from initial point to last point. Currently its working fine with "google.maps.SymbolPath.CIRCLE" icon. But i want to use my custom marker instead of this "google.maps.SymbolPath.CIRCLE" icon. Can someone help to do this.
it will be great if someone help me in short time. Thanks in Advance.
For adding custom icon you have to set icon value in your marker object.
Following is sample how to add custom icon
var marker = new google.maps.Marker({
position: map.getCenter(),
icon:'https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/location-alt-512.png',
draggable: true,
map: map
});
In icon youe have to give path of your custom icon.
Demo for this available here
If you want to add animation on icon on click event than first add click listener
google.maps.event.addListener(marker, 'click', toggleBounce);
and in that function do something like that
if (this.getAnimation() != null) {
this.setAnimation(null);
} else {
this.setAnimation(google.maps.Animation.BOUNCE);
}
New demo here
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);
})
Hi I am doing a project on Integration of google map v3.0. I finished the integration I am happy with the Output. The Problem is I was trying to change the RED Marker to Custom Marker. I have saved a marker in my solution. And was trying with this piece of code.
The Program is running but i am not getting any marker on the map(either red marker or custom marker). I tried in many blogs but couldnot find a solution.
Please anyone Help me Out.
var icon = new google.maps.MarkerImage("icon55.png");
var marker = new google.maps.Marker({
position: location,
map: map,
icon: icon
});
Thank You
This is how I have been doing markers with customer icons:
var marker = new google.maps.Marker({
position: latlng,
map: theMap,
title: title,
icon: icon
});
Here latlng is a google.maps.LatLng object, theMap is the google.maps.Map object, title is a string, icon is the url to the customer marker image.
Hope this helps.
Bob