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)
Related
I generate a Google Map like the following:
lat_lng = new google.maps.LatLng(51.165691, 10.451526);
mapOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: lat_lng,
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
also i got multiple markers that are dynamically added to the map. So as far as i know there is no way in my case to do it without the javascript API.
My Question is:
Is there any way to open that generated map (with all options and markers) in google maps? (https://www.google.com/maps/ ...)
... unfortunately it is not enough to just use the fullscreen functionality of maps!
Thanks in advance :)
The correct answer is yes and no.
There is no way to do such thing on the official Google Maps site, however you can create a map in Google's My Maps. The url does start with 'https://www.google.com/maps'. You can easily add your markers via the UI and I believe it also supports some file formats to import a batch of markers easily. I think you can also set some of the options you want.
Here's an example of an existing map created with this technique.
The only other option I know is to use the Google Maps API to create your custom map with all your markers and options, as suggested by other users.
#JonathanChaplin was correct in his suggestion #FalcoB... if I understand you correctly...
Your aim is for a google map to display, and when it does it shows all map markers like this:
To achieve this you need to store information (such as lat and lng values) externally, like for example in a json file. I have done this previously and my bit of code was simply:
//loads the data from json file resulting in markers being displayed
map.data.loadGeoJson('../upload/file.json');
Google has published documentation on this which can be viewed here:
https://developers.google.com/maps/documentation/javascript/importing_data
I think you can't put the map in google maps, but you can display full screen in your webpage.
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'm want to call fitBounds() on a google map so that a user can see their own location relative to a selected marker/location.
Here is my function which handles this:
var fitMapToShowResult = function(index){
var hereLatLng = new google.maps.LatLng (lat,lng); //location of the user defined outside this func
var firstResultLatLng = new google.maps.LatLng(
$scope.searchResults[index].geometry.location.k,
$scope.searchResults[0].geometry.location.B
);
var latlngList = new Array( hereLatLng, firstResultLatLng ); // latlng: an array of instances of GLatLng
var latlngbounds = new google.maps.LatLngBounds();
for (var i=0;i<latlngList.length;i++){
latlngbounds.extend(latlngList[i]);
console.log('latlngbounds',latlngbounds);
}
//$scope.map.setCenter(latlngbounds.getCenter());
$scope.map.fitBounds(latlngbounds);
};
It works perfectly about 80% of the time. But roughly 1 in 5 times the marker is completely out of view and the zoom is way too high for the two points to ever be visible at the same time. What am I doing wrong?
It may be relevant that my map uses custom markers.
To assist with debugging, I added this code to draw the bounds on the map...
rect = new google.maps.Rectangle( {bounds: latlngbounds, map: $scope.map} );
It always looks perfect for the first couple results:
But often it's incorrect:
Notice that in each of the cases where it's incorrect, it appears that one of the dimensions of the rectangle (height/width) is correct, but the other is not. My gut tells me this is relevant.
Roundup of similar questions
I know this is a popular question, but I've reviewed all of the others and my issue does not seem to be a duplicate of any of them. Hopefully this stockpile will be useful to future troubleshooters, but none of these solved my issue.
google maps V3 fitBounds not accurate
Useless question with no code and no answers
Google Maps API v3 - fitBounds centers only one marker
User was re-defining the inside a loop without realizing it.
Using setZoom() after using fitBounds() with Google Maps API V3 &
Google Maps API V3 fitbounds() zooms out but never in &
Google Maps with fitBounds don't zoom
fitBounds() happens asyncronously so downstream actions need to be wrapped in eventListener.
google maps → fitBounds manually
User was passing incorrect type parameters to LatLngBounds (should be two google.maps.LatLngs)
google maps fitBounds() is broken or..? & Google maps API V3 method fitBounds()
Was constructing the google.maps.LatLngBounds with buggy coordinates (instead of leaving it empty and using .extend())
Trying to get Google Maps fitbounds to work
Super noob did not realize javascript methods were case sensitive
Google maps V3 custom marker images and fitBounds()
fitBounds() works as expected but user needed to allow more space for bug custom markers
Google Maps V3 fitBounds on visible markers
Simple question about how to use fitBounds()... rtfm
Google Maps API V3 - fitBounds randomly works but occasionally ignores bounds and loads in the middle of the ocean
No answers at time of writing. Sounds like invalid lat/lng pairs.
Don't use the values as geometry.location.**k**, it depends on minimized file (with some tool like MinifyJS) then it'll changes when google release a new versión.
MrUpsidown was right. My bounding box was wrong because I was referencing ....geometry.location.k directly instead of the LatLng object. Refactoring the code accordingly corrected the problem.
I need to create an instance of a Google map that uses markers from an external Google Map. More specifically I need to grab all the markers from the "source map", run some algorithms and filtering and them add them to my newly created Google Map.
I've tried searching both the Google Maps API and forums for clues, but most of them are about getting markers from the current map, and not externally.
Do I need to use the KML source somehow?
Thanks in advance!
I am creating a page to show a list of locations(markers) on Google maps. The number of markers is dynamic and can be quite large. This will adversely affect user experience when the map (along with the markers) are taking too long to load.
Can anyone point me in the right direction to load the map first and then load the markers. Any help much appreciated.
Use a marker manager. I used one for Google Maps API v2 (for on-demand loading of ~2000 markers via AJAX) and I am sure there's one for API v3. A marker manager is class that allows you to selectively display markers on a Google Map. Instead of adding markers to map, you use add them to the marker manager and it takes care of when and how to display the markers. The markers that lie outside the "visible" region are removed hence its fairly memory efficient. A marker manager class may provide "clustering" option (or may be you need another class for this). A cluster manager displays one marker that encompasses multiple markers when markers are too close, specially at high zoom level. Hope this helps you in the right direction.