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.
Related
I need to use Longitude and Latitude coordinates on a map that will be loaded in by an external program, and I need to be able to draw things on this map and be able to zoom in and out. Thing is, I cannot draw this map, and I need to be able to interact with both the map elements and with what I'm drawing.
I tried using Google, and found that I was able to control either my canvas or the map, but not both at the same time. Plus, I could not draw things properly on top of Google's map (I'm using Easel.js).
If anyone has any sources or advice, it will be much appreciated.
OK I figured this out with help from my web dev friend. He suggested I use Google Maps, and even though I have that whole "layering" issue (with all my events being captured in the canvas and not trickling down to the 'map-canvas' div), I should go and set up events that capture things like zoom and drag, and pipe them along to my Google Map, and the result is prefect for what I am looking for.
So now I have my Easel.js canvas on top of my Google map, and I just have to set up lat/lng positions for my objects when I want them to be part of the map!
Thanks for the help, everyone!
I am using Google javascript api Currently. I would like to add new places like add small villages in the map, these small village does not appear in google map even when I am highest zoom. I know villages Lat/Lang and would like to add them when someone zoom in map (placed in my website). I can use Marker to accomplish similar, But it is not same as having places by default appear on map.
I tried searching stackoverflow and elsehere on net, But could not find any references. If someone can please sugggest on it
You need to request it from google: google.com/mapmaker
You need to drew a polygon of the city borders.
every request must to be approved by google.
Hope its help.
I used MarkWithLabel to accompalish http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html
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 am trying to add redundancy to map POI since quite a long time for a leaflet map i use on this page : http://worldisbeautiful.net/carte/
I'm sorry if my english isn't clear, that's probably why i'm having hard time to find a solution. See when you zoom out on this map, you have multiple world maps side by side but the POI are only on one map. Is there a way to have POI on each world maps, same positions ?
I understand there is an option nowrap to avoid multiple world maps but i like the idea of moving from left/right and having the earth rotating not just a plain map.
Thanks for the help !
This is a current leaflet limitation. See this support request
I think a workaround might be to replicate the markers with +360 degrees to wrap around the world.
I have a lot of addresses in my database I want to add to Google maps as markers. I only want to load and add the markers that are in the selected area on the map. If the map is zoomed or dragged, it should update the markers on the map.
How do I do that?
Thanks very much in advance!
For managing a lot of markers, you will definitely want to leverage infrastructure that has already been built to do this. There is actually a great post on the Google Developers blog that discusses the popular options.
https://developers.google.com/maps/articles/toomanymarkers
The Marker Clusterer is a very common component that I see all over the place when it comes to maps apps, and seems to fit the requirements that you are looking for. I would also take a look at Fusion Tables, as it makes building a map with thousands of locations extremely simple.
As Aristos said the markers will be showed automatically when coming into focus. BUT, if I you a bazillion of contacts, it could indeed be easier to do it only when required.
My strategy would be:
Keep track of the addresses you have added -- no point doing it twice.
From the address, get the LatLng.
get the map's current bounds (use getBounds() to get the min/max LatLng of the map currently displayed)
check whether the LatLng of the address is within the bounds.
if it is, add a marker.
Loop
If you really have a lot of addresses you might want to prefetch the LatLng and store that in an SQL table. You could then query the table with the intervals.
HTH
EDIT: some code. Assuming you have an Array() of markers, and the Northwest and Southeast boundaries, you could do this:
function filterMarkers(nw, se, myMarkers) {
var north=nw.lat();
var west=nw.lng();
var south=se.lat();
var east=se.lng();
var isInsideBounds=[];
for (var i in myMarkers) {
if(myMarkers[i].position.lat()>=north && myMarkers[i].position.lat()=<south && myMarkers[i].position.lng()>=west && myMarkers[i].position.lng()=<east) {
isInsideBounds.push(myMarkers[i]);
}
}
return isInsideBounds;
}