Was wondering, how do I add a custom marker to google maps, JavaScript, integrated into my site.
This code adds a regular marker:
var marker = new GMarker(center);
map.addOverlay(marker);
but where do I insert an image tag (say, "marker.png" ) for it to appear instead of the regular google marker?
Thanks!
You may be interested in the Google Maps documentation page about custom icons. In particular, see this line in createMarker:
letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
You should be able to replace that with your own image. More info on GIcons is in the API.
Related
Hi all I am creating an Angular 6 project and I am looking to implement asset tracking utilizing google maps api. However, I was wondering if AGM-Map supports everything Google Maps Api does such as heatmaps, and asset tracking because I can only seem to find basic placing markers and circles on a map.
I will say the majority of the functionality of the Google Maps is in AGM, if not you can get your questions answered in the official forum. Also, there are a lot of dependencies that people created to fill this functionalities that were missing.
Here's a small demo, showing how to use the map and showing how to use a marker from the map. This map will add a new marker wherever you click on the map and if you click on a marker it will erase it.
https://stackblitz.com/edit/angular-google-maps-demo-d9iec2
HTML
<agm-map
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
[disableDefaultUI]="false"
[zoomControl]="false"
(mapClick)="mapClicked($event)">
<agm-marker
*ngFor="let m of markers; let i = index"
(markerClick)="eraseMarker(m)"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label">
</agm-marker>
</agm-map>
TS
eraseMarker( marker: Marker) {
const positionArray = this.markers.indexOf(marker);
this.markers.splice(positionArray, 1);
console.log(this.markers);
}
Also reference this for the heat map:
https://www.npmjs.com/package/agm-overlays
https://github.com/SebastianM/angular-google-maps/issues/1423
https://www.npmjs.com/package/agm-heatmap
I currently have markers displaying as below, but without the numbers that signify there is more than one item in that exact location.
I would like the markers to display as shown below:
I was able to in back-end group the items based on exact location and that is fine, but I can't seem to find a way to add the special number/count to show how many items are there without creating special images with numbers drawn in them.
Ideas on how this could be done?
One other direction if I can't doing it cleanly is use PIL to add the number to the image. Still I don't think that is ideal.
So, what you want to do is inject HTML instead of images in the custom markers. It's essentially what you are doing but google allows you to OverlayViews, even of HTML type. See fiddle
HTMLMarker.prototype.onAdd= function(){
div = document.createElement('DIV');
div.className = "htmlMarker";
div.innerHTML = '<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:30px;height:22px">'+ 'your number count'; //This HTML here is driven by your login to have numbers.
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
===[UPDATE]===
So, I tried checking if I could add multiple overlays on the map. I could but they somehow ended up at the same location, and I tried multiple iterations but was not very successful in separating them out.
So, since you are essentially looking for numbering on markers, I looked around for other ways to solve this issue. I found this library on google maps, markers with labels.
You can find a fiddle on how I customized the markers here.
I host a leaflet map and want to link to certain marker on that map from an a-element outside the map. I want the marker to behave like it was clicked, when the link is clicked.
Clicking on
My Link
should activate my marker
L.marker([52.121935,11.627137], {icon: photomarker}).addTo(map)
.bindPopup("<b>This is a marker</b>") ;
How can I achieve that? I got a hint, that it can be done with
marker.fire('click')
but I dont get it. Where should I put that? I am pretty new to javascript...
You can see the whole map here: http://bit.ly/VtFXFN
save reference
var t = L.marker([52.121935,11.627137], {icon: photomarker}).addTo(map)
.bindPopup("<b>This is a marker</b>");
in a
My Link
I have a Map with custom style and its working great,
I was wondering if I can somehow control the location of the map using some links in my page,
suppose I have 2 locations, I want to have
Location1
&
Location2
Then when I click on Location 1 map goes to that location , and same story for location 2, is it possible with jquery?
It would also be great if I can add a custom marker to each location too.
Thanks.
Yes, you can even do it without jquery, the panto method is what you want to use, https://developers.google.com/maps/documentation/javascript/reference#Map basically, just add a call to a predefined function into your anchor onclick event (or use a click handler in jquery to wire it up).
using jquery, you would need something like:
$("#location1").click(function(){
var pos = new google.maps.LatLng(-25.363882, 131.044922),
g_map.panTo(pos); //reference to globally defined google maps object
});
Here is a simple example from the google api documentation that can easily be retrofitted using the hints I have provided above:
https://google-developers.appspot.com/maps/documentation/javascript/examples/event-simple
if your instance of map is named "map", you can use:
Location1
I'm using the Google Maps v3 library, with the Multi-Marker library which extends the functionality of Google Maps for super fast adding of map marker icons to a map.
I can't figure out how to remove a single, individual map marker using the multi-marker library linked above.
Does anyone have any ideas how I'd do this using the multi-marker library (and/or Google Maps)? I've tried contacting the lead developer of the project but am not getting a response.
Thanks for any help.
Also, linked is more information on this library
http://blog.redfin.com/devblog/2010/07/introducing_multimarker_the_fastest_way_to_add_many_hundreds_or_thousands_of_markers_on_google_maps.html
UPDATE:
I have linked example code of what I'm doing. I want to dynamically remove specific map marker icons (overlays) but am struggling on how to do that. Any advise would be very appreciated. Thanks
Live example:
http://multimarker.googlecode.com/svn/trunk/fast-marker-overlay/maps-v3/example/clickable.html
Normaly, using only the google maps api, to remove an overlay from the map you would need to call the setMap(null) method on the overlay.
As I can see, the Multi-Marker library uses an array to hold all the markers and creates an overlay to show on the map, an overlay that contains the markers. To remove one, it should work to remove the marker from the array (you need to know its position in the array) and redraw the overlay.
Edit:
You need something similar to function clearOverlays() { var i = overlays.length; while (i--) { var overlay = overlays[i]; if (overlay) overlay.setMap(null); delete overlays[i]; } }
But you'll need to know the position in the array of the marker you want to delete. The function will look like this:
function clearOneOverlay(var position) { var overlay = overlays[position]; if (overlay) overlay.setMap(null); delete overlays[position]; }
try this: remember which marker you click and then remove it later
consider following code(Google Maps v2)
var current_marker;
GEvent.addListener(marker, "click", function() {
current_marker = marker;
});
//remove later
current_marker.setMap(null);