I'm trying to add markers on my Google Maps V3. I want to have similar markers as on Foursquare, where they join an icon and image (with JS) and create one big marker.
Does anybody know how to accomplish this?
Rich marker perhaps?
Rich Marker v3
PS. the copy of richmarker.js from here worked better for me
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)
Is it still a feature to render road on google street view?
Most articles that mention it are form 2008-2009, so i assume they removed it in new maps?
Is there way to programmatically show directions blue line on street view panorama?
After looking at Google's Documentation, Polyline/Direction is not supported.
You can only add Markers, InfoWindows and custom OverlayView
i need insert my map picture to my google map with markers, at sites. I have map without draggable, static zoom. Can you help me?
Thanks
So you're trying to lay an image on to google maps, in a specific location? If so, I think this should be able to help you:
https://developers.google.com/maps/documentation/javascript/examples/overlay-simple
Does anyone know how to change the boundaries of a map with the google maps api? I have a map currently that shows the full world and if I zoom out it shows multiple copies of the full world. The problem is that I only want to show north america, and I only want to show it once. Can anybody help out? Thanks!
Duplicate: Google Maps API V3: limit map bounds
There's no API to restrict map boundary in Google Maps API. You may can accept external solution, or consider using other map library like OpenLayers or Leaflet, which supports max-extent feature.
I'm using Google Maps v3.
I really like the InfoWindows found in Bing, as opposed to Google.
Screenshots & functionality found here comparing the two:
http://www.axismaps.com/blog/2009/07/data-probing-and-info-window-design-on-web-based-maps/
Question: How can I replicate Bing like InfoWindows while using Google Maps v3?
UPDATE: To be more specific, what I like about Bing's InfoWindows include:
- The pointer dynamically changes sides from left/right/bottom/top, as opposed to Google limited to only have the InfoWindow pointer on the bottom
- Bing's InfoWindows use less space
- You can configure Bing's InfoWindows to pop up outside of the map bounders so that you don't have to autopan the map to display the marker's InfoWindow
Check out google-maps-utility-library-v3. Specifically, look at InfoBox. It allows you to style the infobox however you want, although you have to do the styling on your own. I don't think you'll be able to have the infobox display outside the map viewport, but you can turn off autopan.