Skip to main content
100%

distant google maps markers

✓ Published0🌍 Public
Aabernier
Last edited Dec 9, 2012
Created on Dec 8, 2012

1000 pink star-shaped custom markers are scattered over a Paris map, with jQuery UI tooltips showing their distance from the center in meters. Using the Google Maps JavaScript API, each marker is a CustomMarker overlay with a `draw` and `position` method, while MarkerClusterer groups them for performance.

AI-generated description

Similar vizzes

Loading thumbnail…

Map Collab

A map of London and Paris displays hotel locations as brown circles overlaid on a Google Map. The visualization combines the Google Maps JavaScript API with D3.js v3 to render SVG markers that are positioned using the map's projection. Hotel data, including latitude, longitude, and review scores, is loaded from a JSON file, and markers are hidden when the map zoom level falls below six.

Aandy
66% match
Loading thumbnail…

d3.js map with markers

This example demonstrates two techniques for placing geographic markers on a d3.js map, centered on Berlin using a Mercator projection. The map renders world land masses and country boundaries from TopoJSON, overlaid with a graticule. Transit stop locations from a GeoJSON file are displayed in two ways: first, by leveraging d3.geo.path() to draw the GeoJSON directly as green path elements; second, by projecting coordinates to screen positions and appending small yellow SVG circles. The visualization compares these two marker approaches, showing that d3.geo.path() handles all projection work automatically, while the manual method uses projection(d.geometry.coordinates) to position custom SVG shapes. The example uses d3.v3 with SVG rendering and a Mercator projection centered on Berlin.

Aackuser
63% match
Loading thumbnail…

Leaflet - markercluster

This example demonstrates how Leaflet.markercluster groups hundreds of nearby map points into cluster icons, with each marker’s label bound as a popup. The map loads geographic coordinates from a `clusterPoints.json` file and renders them as clustered markers using the `L.markerClusterGroup` API and its configurable options like `maxClusterRadius` and `spiderfyOnMaxZoom`. Tile layers come from OpenStreetMap, and the Leaflet 0.7 library handles the base map interaction for zooming and panning.

11Cr18Ni9
63% match
Loading thumbnail…

Gist 8393692

This example displays two geolocated markers on a map, each with a title and description of a building. It uses a `map.geojson` file as the data source, containing point features with custom properties for labels and colors. The visualization renders the map using D3’s `d3.geoPath` to draw the geographic features, while the markers are positioned based on their coordinates. The code relies on D3’s force simulation (`d3.forceSimulation`) to potentially handle marker placement or interaction, though the static view shows the two points plotted directly.

Aadkatrit
62% match
Loading thumbnail…

Gist cf5cdef5ed7f63fb3d441e306d7febe3

A heatmap of 500,000 simulated points clusters in Paris, displayed as a WebGL layer over a dark CartoDB map. The visualization samples 10,000 points, using leaflet and leaflet.extras to render the heatmap with pixel-based sizes. The data is randomly generated from a normal distribution around Paris's geographic center, and the rendering leverages WebGL for performance. The basemap and heatmap are combined using the `addProviderTiles` and `addWebGLHeatmap` functions.

RRCura
62% match
Loading thumbnail…

Google Map + D3.js

This example combines Google Maps with D3.js to display bars and lounges around a Los Angeles hotel, using data from the Yelp API. A custom Google Maps overlay projects each business's latitude and longitude onto the map, rendering them as styled SVG markers with numbered labels. The map itself uses custom styling to alter road, landscape, and transit appearance, while the markers are drawn as red circles with white strokes. The code relies on the Google Maps JavaScript API, D3 v3, and jQuery for data handling, with the input data stored in a query.json file.

LLucaZampieri
62% match
Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Mmbostock
62% match
Loading thumbnail…

Gist 7dcb0a7f9fae27f177013a8778db59bb

This interactive map clusters geographic points across multiple zoom levels, showing marker density from state and county summaries down to individual locations. It uses the Supercluster library for hierarchical point clustering and Tilebelt for tile calculations, with PostGIS spatial queries fetching points within tile bounding boxes. Clusters are cached per tile and zoom level, and D3’s max function determines cluster size scaling, while marker data comes from a geocoded node database.

Aakre54
61% match