We Keep Coding

How to add user images on markers in google maps?

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)

Google Maps grid lines appearing over custom markers on Safari

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

Placing marker or overlayview on Google Map StreetViewPanorama via lat/long and pitch

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

Moved marker disappears when using Marker Clusterer

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.

Keep Google Maps marker in centre of map while dragged?

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.