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);
Related
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 = [];
What I want to do, is to display a simple google map (with basic, satelite and hybrid as options), add a custom marker to it, have it centered on a specific location, AND .. have the entire MAP faded out a bit so the marker would be more clear.
This last bit proves to be quite a difficult task, since I need to somehow fade the map, but maintain the marker and mapcontrols on top of the map, so the normal functions of dragging the map, zooming and clicking the marker would still work. If this was simple HTML, I would control it all using z-index values, but it looks like the markers are embedded inside the map tiles using canvases, so I'm really bound to using the google API to do this.
I've spent an entire day looking through Q&A here on stackoverflow, browsing the google API and trying to find some simple way to add a transparent overlay on a google map using API v3.
So far, the closest I can find about this, is to create a custom layer using KML and have it displayed as a control, but since I'm really not into how the KML works, this is really advanced, and I feel like I have to spend weeks to make this work correctly.
Is there really no simple way to create this transparency effect in a google map?
For simplicity I'm using gmap from smashinglabs.com, but I could easily switch that out with a more general google maps API call. This is the javascript-code I'm currently using:
$("#bmap").gMap({
latitude: 'fit',
longitude: 'fit',
zoom: 'fit',
maptype:google.maps.MapTypeId.HYBRID,
controls:[{pos:google.maps.ControlPosition.TOP_LEFT,div:$("#bmapoverlay")}],
markers: [extraMarker,{ latitude:XX,longitude:XX,html:'',
icon:{image:'*URL*',iconsize:[56,90],iconanchor:[28,90]}}]
});
Please note I've removed the long/lat numbers as well as the icon URL for the sake of privacy :)
Adding the DIV bmapoverlay doesn't work at all, and I would consider removing that all together.
Documentation for the smashinglabs gmap can be found here.
The gamma or lightness styler should work for what you asked. This is not a transparency effect, which means it will not allow to see any element that would be behind the map but it should achieve the fade out effect that you mentioned in your question.
See the documentation about stylers here.
Example usage:
var mapStyles = [{
"stylers": [{
"gamma": 6
}]
}];
map.setOptions({
styles: mapStyles
});
JSFiddle demo
Hope this helps!
Interesting question.
I am sorry but there is no way to apply any sort of opacity on map itself that can visually highlight your marker.
Using KML is seriously a bad option. Using KML is very once you understand it but it will not fulfill your case. Furthermore, it will make your map slow. You can try it by using world kml file and using the following tutorial:
KML files
https://www.google.com/fusiontables/DataSource?docid=1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk#rows:id=1
and
https://www.google.com/fusiontables/data?docid=1zn8cjdD6qlAFI7ALMEnwn89g50weLi1D-bAGSZw#rows:id=1
sample code:
https://developers.google.com/maps/documentation/javascript/examples/layer-kml
What I think will be best for your problem is that you create simple google map by sample code:
Now you add one more div above map div and set your opacity/transparency to it.
Next you add custom markers using D3. Here is a great tutorial/sample code:
http://bl.ocks.org/mbostock/899711
If you are not familiar with D3, do not worry, code is very simple. (If you need any help understanding this code of D3, please ask). You'll be creating markers using SVG.
Profit of using D3 for markers is that even if you place 1000+ markers on your map, it will not effect any performance.
Well you can also use custom style maps. Use following link and check on "lightness" and do modifications with it.
Regards,
Suyash
I'm using CFGMap solution to place markers on a google map (API V3) but I want the map to always be centered on a certain long/latitude. Right now it seems to center on the last marker placed on the map so if the majority are where I want the long/lat centered then one random marker will take view miles away.
Any help on this is appreciated.
Thanks!
CFGMap is infuriating for it's lack of documentation. I don't use it myself; I only tried to track down something that might help you. On the face of it, it appears only to take a tiny subset of the full API functionality and doesn't offer much else.
From what I can glean from the testmap.js found here, it appears that you can only center the map on an existing marker in your locations array (see line 616 of the github file).
_cfGMapObj.resetCenterToLoc(index);
So, for example, in the source of the example is the line:
_cfGMapObj.resetCenterToLoc($('#locID','#printLink').val());
which grabs the number from the value of the current option in the select at the top of the page.
Now, if you chose instead to knock CFGMap on the head you could employ the Map API fully and set the center of the map using the setCenter method of the API.:
map.setCenter(new google.maps.LatLng(lat, lng));
e.g.
map.setCenter(new google.maps.LatLng(57.4419, -121.1419));
which in my mind is much easier. Plus, if you decided to do this, there are tons more articles on the API on StackOverflow than there are on CFGMap. YMMV.
I ran into a leaflet issue but I can't solve it. May be there's a easy solution I don't know.
So basically centering a map of grouped markers isn't so difficult and can be done like the following:
var markerLayer = L.featureGroup(marker)
.addTo(map);
var bounds = markerLayer.getBounds();
map.fitBounds(bounds);
where marker is an array of markers. But my problem is that the marker array information I send to this code are generated by another system. So basically the marker can be far apart in the map or they can be really close.
When the markers are far apart the code above works perfectly and centers the map. However if the markers are really close (for example if they are from the same street), or better yet if there is only one marker problems arise. This is because getbounds will give me a rectangle that is so small that leaflet breaks (and this is of no use for the user as well). I mean the map basically tries to zoom in to that marker. So my question is how do I limit the zoom. For example if there is only marker in the map I want the map to show the marker and few streets around it.
You can give a maxZoom to the map and the fitBounds will not override it.
The method map.fitBounds takes a parameter called maxZoom. This way you can have two maxZooms, one for the map and one for fitBounds.
I am finishing an app for iphone/android in which I display a map (google maps) with my position and a lot of pins nearby.
My problem is that the first time it works perfect and the second time I open it, it centers it wrong and it only shows a part of the map, the top left part and only like the first quarter of the map is visible.
Did someone have this issue?
Thanks for your help
Can you provide some code. I've faced same when i tried to reuse the division with data role
try creating new request each time you wish to see map
For me, the following worked:
After creating the 'map' object, do:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(mapCenter);
});
This is not my solution. I found it somewhere here on SO, but I just can't seem to find the same post again.