Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
TTylerVaughan
Last edited Apr 5, 2018
Created on Apr 5, 2018

This example shows a basic Google Maps interface with a single marker placed at Uluru, Australia. The map centers on the location and includes a zoom control. The code uses the Google Maps JavaScript API to initialize the map within a div element, with a marker added at the specified latitude and longitude. The map is displayed at a fixed height and full width, with a simple title heading above it.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Display a map on a webpage

This example displays an empty map centered on Melbourne, Australia, at zoom level 15 using Mapbox GL JS v1.13.1. The map is rendered in a full-screen container with a minimal style object specifying version 8 and empty sources and layers. The code initializes a `mapboxgl.Map` instance, then calls `setCenter` and `setZoom` to position the view, and logs the current center and zoom to the console. No geographic data or additional layers are loaded, so the map shows only the default background tiles.

TThomasG77
68% match
Loading thumbnail…

simple implementation of a google map using the react-google-map library

This example shows a simple interactive map centered on a fixed coordinate, with a marker placed at that location. It demonstrates the core usage of the react-google-maps library by rendering a `GoogleMap` component inside a `GoogleMapLoader`, which attaches the map to a full-size container div. The map’s zoom is set to 15, and the `options` prop disables the street view and map type controls. Markers are rendered from an array passed via `this.props.markers`, in addition to a hardcoded marker at the given latitude and longitude, illustrating how to compose map elements with React props.

CCKschneid
67% match
Loading thumbnail…

fresh block

This example presents an interactive map of the United States that layers OpenStreetMap raster tiles over a vector outline of the country. Users can pan and zoom, which triggers the loading of new map tiles and the redrawing of the state boundaries. The visualization is built with D3 v4, using its geographic projection and path modules alongside the d3-tile and d3-zoom libraries. The vector data originates from a local US GeoJSON file, while the background imagery is fetched from the OpenStreetMap tile server.

AAnaMal08
66% match
Loading thumbnail…

HTML5 GPS

This example shows a live GPS track on a Google Map, plotting the user’s current position with a custom marker whose icon updates as location accuracy improves. It uses the Google Maps JavaScript API and the browser’s `navigator.geolocation.watchPosition` method to continuously update the map center and zoom level based on reported precision. The code also accumulates a data log of latitude, longitude, accuracy, and elapsed time, which can be exported by clicking the marker.

KKirun1
66% match
Loading thumbnail…

fresh block

A map of London shows a cluster of dots animating from radius one to radius six, each positioned by latitude and longitude from a CSV file. The visualization uses Leaflet with a Mapbox tile layer, and D3.js to render SVG circles that are projected to pixel coordinates and repositioned as the map pans or zooms, overlaid on the map’s overlay pane.

CChmits
64% match
Loading thumbnail…

Events

This example shows a geographic map of volunteer events across U.S. cities, with clickable markers that open detailed infowindows containing event descriptions, dates, addresses, and volunteer counts. The map uses the Google Maps JavaScript API, with custom top-center controls to pan and zoom between city locations. Event data is fetched from a remote server via jQuery AJAX, and dates are formatted using Moment.js; the visualization also supports URL parameters to filter events by date range.

WWill Carter
63% match
Loading thumbnail…

fresh block

This example visualizes a map of the United States using the D3.js library and a TopoJSON dataset of state boundaries. The visualization renders the geographic outlines of U.S. states from the USA.json TopoJSON file, using the d3.geomap plugin to project and display the map. The page is styled full-screen with an SVG element that fills the viewport. The key visual encoding is the use of state polygons with names and IDs, which enables interactive selection and highlighting of individual states, though no interaction code is included in this basic setup. The design is minimal, focusing on the clean presentation of state shapes in a neutral white background.

CCurran Kelleher
63% match
Loading thumbnail…

fresh block

A rotating world map displays continents in a continuous spin. Using D3.js v4, the visualization loads GeoJSON country boundaries and applies an orthographic projection. The code sets up an SVG canvas and employs `d3.geoOrthographic` and `d3.geoPath` to render the geographic shapes. A timer-driven animation updates the projection's rotation along the X-axis, causing the globe to turn smoothly. The map's data originates from a remote GeoJSON source provided in the code, and the frame is rendered dynamically as an SVG path that updates each tick.

NNafisehmousavian
63% match