Develop Reference

Google Maps Markers in wrong location, but lat/lon appears correct

I am using custom markers to show a semi-live view of the location and orientation (heading) of certain vehicles of interest overlayed on Google Maps. (In my case, I'm depicting aircraft, the same way Uber does for cars, or how FlightAware does for commercial flights).
The coordinates for the markers are being broadcast in JSON format to participating browsers from a server that I control. The JSON data is processed by a JavaScript function at the browser to create / update the markers on the Google map. The refresh (broadcast) rate can sometimes be as fast as once every 2-seconds, or as slow as once every 30 seconds, depending on the particular user's needs of the moment.
Sometimes, it is possible (and valid) for two markers to be thousands of miles apart from each other. For example, one marker could be in Montana, and the other could be somewhere in Africa, and this is a valid condition.
However, sometimes, when I am zoomed into a region of the world so I can look more closely at one marker, a "ghost" marker appears nearby that "isn't really located there". The ghost marker is labeled as one of the other markers that may be hundreds or thousands of miles away, but it's showing up in my zoomed in view for some strange reason. If I momentarily zoom in our out, the ghost disappears, but it may re-appear again.
Interestingly, the ghost image has the proper orientation for the vehicle it represents, but it's just located in the wrong part of the world.
Are there any special things I should be doing when I'm updating multiple markers separated by large distances so they don't show up like this in the wrong place?
I have traced this as far as putting console messages in the browser so I can see the lat/lon of each marker being depicted. I output the latLng object just before it's applied to each marker, and the lat/lon I see in the console log is correct, even when the actual marker shows up in the wrong place.
I don't know if this is a contributor to the problem, but the marker images I'm using are custom PNG files, not standard Google makers. Has anybody run into this before?

As I can see there are a couple of issues reported in the Google issue tracker very similar to the one you described here.
Have a look at them:
https://issuetracker.google.com/issues/74225068
https://issuetracker.google.com/issues/73864685
Feel free to add your comments and star the issues to subscribe to further notifications from Google.
Please note that these issues were reported for the experimental version of Google Maps JavaScript API. Double check which version of the API you are using. Probably loading the release or frozen version will work as a temporary workaround for you.
For more details about versioning model of Google Maps JavaScript API please refer to the documentation:
https://developers.google.com/maps/documentation/javascript/versions
I hope this helps!

How to create a clickable grid layer on top of a map using OpenLayers

I'm somehow new in making web services using Openlayers and Javascript. I would like to create a clickable grid layer on top of a map (e.g. OSM) which first has a defined spatial resolution (e.g. 200 m) and of course when user zooms the grid size adapts to the new zoom level of the map. Also I want to show every cell of a grid with a specific colour, and when the user clicks on each cell some information can be shown. So, I guess each cell is like a feature in this layer (e.g. polygon). I was wondering if Openlayers has existing function to do such a thing that I can use, or do I have to code all of it? any help and suggestions on how I can manage to do this would be highly appreciated. Below is a link to a service that has created such a service, I would like to do the same... Thanx.
Link to sample:
http://koenigstuhl.geog.uni-heidelberg.de/osmatrix/#timestamp/allotments_area/8/12/-0.2142333984375/51.578776399817066

Having developed the application you mention in your example, I can give you some hints on your question. The solution is pretty straightforward.
The grid you see, i.e. the coloured hexagons, is simply map tiles, that are served by a custom back-end following the Tile Map Service schema (I used NodeJS) that, in turn, uses Mapnik (any other engine should work as well, e.g. GeoServer or MapServer) for rendering the images. The data is stored in a Postgres data base with PostGIS added on.
Use a client-side library to create the map and add the tiled layer. OpenLayers and Leaflet both do the job well. (Leaflet, though, is a bit easier to grasp if your new to the topic).
On client side you register a click-event handler on the Map, that you can use to get the coordinates of the mouse click. Use these coordinates, send them to your back-end and perform a spatial query on the data base to get the polygons adjacent to the coordinates. The server's response should then provide the geometries of the polygons (encoded in GeoJSON in this case, GML, KML should work fine as well) and whatever information you want to display.
Use these polygons and add them to a vector layer using whatever colour scheme you want.
Have a look at the code to see how it works. The important files are osmatrix.js (connects to the back-end), control.js (main module, keeps track of everything) and map.js (surprisingly enough, everything map-related).

Openlayers has facilities for creating an interactive vector later. In order to create something like in the example, you would have to 1) add a vector layer, 2) write a loop that adds vector features to the appropriate locations on the map, 3) style the features as hexagons, and 4) create a stylemap that dynamically sets the feature color based on the appropriate parameters. Each step is facilitated by Openlayers.

A good start is to use the leaflet library because it use the map projection and to read this tutorial: http://build-failed.blogspot.de/2013/07/dynamically-creating-hexagons-from-real.html?m=1.

Make Google Marker follow road

I'm currently using Google Maps to display data from over 500 vehicles on a map. Currently, vehicles are updated on average every 60 seconds. I currently use some JavaScript/jQuery to animate each marker from its old position to its new position.
Because the data isn't coming in very frequently it often means that each marker would animate across many buildings, rivers, lakes etc. What I'd like to do is have these markers follow the road, however I'm worried that in doing so it could become expensive.
I see that the Google Maps Directions API would allow me to do this. If I calculate the route from the marker's old position to its new position it would split the route up into many different lines and I could have the markers animate across them. However, with 500 vehicles updating every minute, that's 500 direction requests every minute. Somehow I don't think I'd even survive on the Google Maps for Business API.
If anyone has any ideas as to how I could do this without spending billions, I'd appreciate it.
Thanks

It seems to me that you would only query the Direction API once for each 500 vehicles as long as the destination never changes. You may still run up against API rate limiting nonetheless.
You're going to need to reduce your set of 500 down to something more manageable. I would probably start by only performing animations/calculations on markers that are only immediately visible within the given map viewport. You would still need to update all marker positions in case a marker is about to come into your viewport, but you don't necessarily need to manage this with an actual google.maps.Marker object for each vehicle. You could instead keep track of positions in a separate data structure so you're not having to constantly draw to the map.
As an aside, you may also want to explore clustering options for your markers as having more than a dozen or so on screen at once becomes visually unmanageable.

Display own places on custom Google Map

I'd like to create a map of a space system from a computer game.
I understand that you can use the Google Maps API to render your own map with custom tiles and placemarks etc (which I've done successfully), but I'd really like to be able to see hierarchical place names in the same way that you see New York, Brooklyn, Manhatten, Queens etc when viewing New York from this zoom level, and Chinatown, East Village, Hudson Square when viewing New York from this zoom level.
I've also had a look at Google Fusion tables, but they appear to be restricted to Earth locations only.
I suppose ideally I'd like a modified version of the google.map.Marker object that displays the name of the marker next to the marker itself and allows specification of the text-size and at what zoom level the marker text appears. But that feels like a hack.
Is this possible using the Google Maps API, or another browser-based mapping system?
EDIT:
D'oh, should have kept Googling. Someone's basically done what I was looking for here.

Self-answering the question so it doesn't keep coming up as unanswered.
I've used the code from Uncle Tomm's blog to solve the problem.
I just need a good algorithm for displaying nearby placenames without them overlapping... but that's another question!

Library for visualizing users on map over time

I have data corresponding to user events with (location, time). I would like to visualize these on an animated map. Maybe with points of light appearing when an event happens (with multiple events in the same place making a brighter dot). Double points for animating the day/night regions on the map at the same time. Is there a javascript library good for visualizing such data?
The map on the right side of this visualization written in processing doesn't quite fit my description, but would also work well.

I found that d3.js worked really well for the project. The geo module made it easy to draw a world map (with data from data/world-countries.json and a mercator projection) in an svg element. First, I pre-processed the data to put the users in "buckets" of gps locations. I added a circle for every location, and changed its radius for how many users were in that bucket.