This is an Angular specific / Google Maps problem. I am using the Angular Google Maps library. I am struggling to reference Google's Marker object because they are generated in the HTML file.
HTML
<map-marker
#markerElem
*ngFor="let marker of markers"
[position]="marker.position"
[title]="marker.title"
[options]="marker.options"
(mapClick)="openInfo(markerElem, marker.info)"
>
</map-marker>
I need to clear these markers out that are generated in this HTML file. It seems that google maps does not have a clearMap() functionality, and most forums agree it is best to keep track of markers by having a list of them in the code.
The "markers" variable seen in the HTML is just a custom object I made to fill in the fields of the actual Google Marker object.
There are two solutions I can think of but I don't know how to go about doing it.
1.) generate the Marker objects in my TS file. (Note: I would like to keep as much as possible the structure of the HTML. One thing I did worry is that the tag would automatically create a map marker and thus my list of Marker objects wouldn't actually be the ones on the map).
2.) somehow reference the (I think these tags actually generate markers in the background) as a list of Markers.
If anyone has examples of clearing markers off the map in Angular please share. Any help / suggestions are appreciated.
When you need to clear the markers,
In your ts file, just do
markers = [];
Related
newcomer here, been searching through google but not finding the help i need.
Im making a website for outdoor gyms, where I have placed my markers with coords(may have to stash them in mysql) but currently in my code in a markers array.
I want the user to be able to input their adress/county to find the closest outdoor gym/ running track based on their preference. The search should search through the markers and find the closest one in that area.
Until now, i have the map, the markers, the searchfunction is a big obstacle for me atm.
I appreciate any kind of help.
you could save markers by their coordinates (longitude and latitude) on your db. Then, you could use leaflet to load googleMap or openstreet map and draw your markers.
This is an useful tutorial https://scotch.io/tutorials/making-mean-apps-with-google-maps-part-i. I think it is the good point to start.
I am creating a webapp and want my users to be able to click a marker on the map and grab the address from the small window it brings up. These are the markers that are already built into the map, not ones that I have added, like so:
http://i.stack.imgur.com/cPVOv.png
I keep finding things for markers that you have added. I do not know how to access these markers. Presumably I want to do this for the onclick event of markers and be able to grab the information somehow. But I have no idea how to do anything with these markers.
Thanks for the help.
Now obviously if I was just adding them in a normal fashion I would just keep them in an array along the way but in my case the markers are being loaded in, but I am using a KML layer.
So after the KML loads and the markers show up I basically just want to know how many there are, and I can figure out some dumb hack for this (loading the KML file again with jQuery and counting it there or something), but ideally I just want something like myArray = map.getMarkers() or myArray = map.getOverlays(), does anything like that exist?
It seems such a simple task, not why it is taking me so long to find the answer. Maybe it just isn't possible?
There's no such thing, you have to keep an array and add the object IDs everytime you insert one.
I'm not sure if you're able to access the markers once you've added them in using a KLM layer. If you don't have that many markers, then I would say load them using the regular Marker class.
Maybe I didn't do it right, but last time I tried implementing markers using KLM layers I wasn't able to add any events to them, or access them at all.
If you only need to count them, then I would say load that same KML file using AJAX, and parse it as an XML and you can grab the elements from there to count them.
You can't access the markers in a KmlLayer (it is rendered as map tiles by Google's servers). You could use a FusionTableLayer (you can import KML into the FusionTable, then modify the query to that FusionTable to filter the markers) or a third party KML parser like geoxml3 or geoxml-v3 (which render the KML using native Google Maps v3 objects).
example using geoxml3
example using FusionTables
I'm relatively new with using Google Maps API. Right now I am working on a project where a user can select various search filters and see results automatically show up on the map without reloading the page. My approach thus far has been to create a Javascript object with controls the map so that I could manipulate pieces of it as I wish (ie, centerMap(), addMarker(), clearMap(), etc). I developed several proof-of-concept pieces before beginning this phase of the project.
Right now I am at the point where I have a custom JS object which controls my GMap. The GMap is drawn correctly, the zoom and center are fine. Next I try to run a function which adds a Marker to the map. I'm guessing it's possible to add markers after a map has been generated and I'm simply making a mistake somewhere. Below is my code as it exists. I'm wondering if anybody can shed some light as to why my marker isn't showing up...
Any and all help is greatly appreciated!
Code: http://pastebin.com/1ZzH9zHk
Thanks in advance!!
Dima
In your code, shouldn't
var map = new google.maps.Map($('map_canvas'), myOptions);
be
this.map = new google.maps.Map($('map_canvas'), myOptions);
I would like to do something like what is shown in the screenshot - http://themanyfacesof.com/wp-content/uploads/2010/03/map.png
I want to be able to highlight certain areas on a map using PHP as a server side technology and jQuery(preferable) on client side with some tooltip functionality. Is there anything available or any idea how this could be achieved with the complexity involved?
Completely client-side solution: http://jvectormap.owl-hollow.net/
Look into using Google Maps for this. You can overlay lines and polygons which effectively means you can do anything - for example Loughbrough University does this.
A good way to start is to
Log in to Google
Go to Google Maps, then to my maps and create a new map
Draw polygons and line using the tools provided
Right click and copy the link for Google Earth, visit this link but change the output to KML output=kml. KML is just like XML
You now have a file with the exported polygons and lines that you drew. You can then re-draw these onto a Google Map programmatically
I did this the other day to get some rather complex polygons drawn onto a map without having to trial and error the latitude and longitude coordinates for them.
Hope that helps.