I'd like to display some crosshairs in the very centre of a Google Map.
Currently I have code like this:
var mapCentre = map.getCenter();
reticleMarker = new google.maps.Marker({
position: mapCentre,
map: map,
icon: reticleImage,
shape: reticleShape,
optimized: false,
zIndex: 5
});
google.maps.event.addListener(map, 'bounds_changed',
function(){reticleMarker.setPosition(map.getCenter());});
Works great on a desktop, but not on mobile. On mobile the crosshairs don't stay in the centre of the map while the user's finger is dragging the map.
Using a drag event listener doesn't work any better.
Could anyone suggest how to deal with this in mobile browsers? (For reference, I'm seeing this problem in an Android browser.)
I'm thinking perhaps I should display the crosshairs in CSS, rather than as a map marker?
I'm thinking perhaps I should display the crosshairs in CSS, rather than as a map marker?
I've used a similar approach to great effect. You can put any HTML you want in the maps container, Google Maps wont mind.
Related
I'm building an angular app in which I require user profile images to be shown on google map as markers.
The location comes from an API as JSON with Lat, long and images of user.
Plus, I'm using clustering in maps. Whenever I click the cluster, the markers with images should appear.
I'm trying it both AGM maps library as well as Google Maps Javascript API
Is there a way to do it?
To use custom markers and use your own images. You simply have to pass the url of your image to the an icon property of the Marker object as below...
var marker = new google.maps.Marker({
position: point,
icon: 'http://contoso.com/image.png',
map: map
});
if you need more control over that image and how it is rendered. Google Maps API provides and icon object specification you can use
var icon = {
url: 'http:contoso.com/image.png',
anchor: new google.maps.Point(0, 0)
}
There are a lot of documentation and examples in Google Maps APIs website
If you don't want to use google maps default marker and want to add custom HTML to markers,
Check this plugin out - https://github.com/googlemaps/js-rich-marker
Really easy plugin to use HTML as google maps markers.
Note - Basically this plugin uses custom overlay as markers. So, compared with default google maps markers, I think using this makes the map becomes a bit heavy to pan around when there are many markers (especially on smartphone)
This is only happening for me on Safari (v7.1.7). My custom markers have what appears to be white map gridlines appearing. I don't know if this is a problem with my code, a problem with Safari, or a problem with Google Maps.
EDITED TO ADD
Link to page affected: http://momentumdevelopments.ca/2015new-preview/projects/bpr-lofts/
I think this might be a js conflict somewhere on the page, as I can't get the same thing to happen on a JS Fiddle.
I know this is an old question, but adding "optimized: false" to marker config fixed this issue in safari for me:
marker = new google.maps.Marker({
position: LatLng,
map: map,
optimized: false
});
Also found this solution here: Google Maps - Strange vertical and horizontal lines at certain zoom levels in Safari
This behaviour may be a result of a custom browser-zoom, so check if the browser-zoom is set to default
Some web apps (like Nightwalk, seen here: https://nightwalk.withgoogle.com/) have markers placed at various locations in streetviews (notably, above your head).
I know it is possible to place a marker via latitude/longitude, but I am not seeing any option to place a marker as they are in nightwalk (over a users head). If I were to set a marker to a current streetviews latitude/longitude, it would just show up at the photographers foot.
Is a simple way to set a marker taking the pitch/heading into account? Nothing seems to stand out in their API specifications. https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions
Or are they manually calculating the POV and placing the markers themselves on their own custom layer?
You might to check out the Overlays with Street View page in Google Maps documentation. Make sure you "Toggle Street View"
The main portion for that demo code will be the following:
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
I have an application that has a large number of markers (hence the desire to use Marker Clusterer), but I want to allow the user to move the marker around. Unfortunately, the marker disappears after it has been moved and you zoom out / in. Precisely, these are the steps that reproduce the problem:
Create all the markers / add them to a marker clusterer object.
Zoom in to see an individual marker.
Move the marker to a new location.
Zoom out until the clustering kicks in (and groups the moved marker with at least one other marker)
Zoom back in to see the marker that was moved.
I would expect the marker to still be there after zooming back in, but it is not. After step 3, the marker remains visible -- it only disappears after zooming out and then back in. The clustering still counts the marker correctly (it appears in the cluster total when zoomed out), but the marker doesn't ever appear again.
I have tried using the latest versions of MarkerClusterer and MarkerClustererPlus and I'm dealing with v3 of the maps API. Additionally, I have an event listener that calls repaint on the cluster after a marker dragend occurs (thinking that a repaint would cause the marker to be placed proper).
[Edit]
A minimal example (based on the Marker Clusterer example) that demonstrates the problem can be found here. The only things changed from this example are the lines including the javascript libraries (made absolute links), and adding draggable: true to the marker options. Following the above 5 steps should reproduce the problem.
This is a bug that has been reported to the google maps api team (issue # 167). See here
It is triggered any time by a setMap(map) followed by any sort of marker movement (including animation) followed by a setMap(null). At that point the marker cannot be shown again.
I have a marker on a Google Map using the v3 Javascript API that is beneath another marker. When I click on the topmost marker, I would like to have the click event bubble up (down?) to the bottom-most marker with the goal of providing an optional menu for the user to choose which marker they meant to click.
Is this possible with the google.maps.event.addListener for click events?
Can I query the map for all markers that are contained by a given location, apart from hacking it myself?
As far as I know there isn't a builtin way to cycle through the markers on the click event. You can control the zIndex of each marker via the MarkerOptions which will override the default stacking based on vertical position:
All markers are displayed on the map
in order of their zIndex, with higher
values displaying in front of markers
with lower values. By default, markers
are displayed according to their
vertical position on screen, with
lower markers appearing in front of
markers further up the screen.
It think you will have to code this up yourself. I would love to hear how that goes.