Migrating from Google Maps

Migrate your Google Maps dynamic and static map integration to Woosmap Map JS API.

The Woosmap Map JS API was designed to match Google Maps’ class names and method signatures. If you’re only using dynamic maps, markers, and shapes, this migration is essentially a find-and-replace.

Script Tag & Map Init

        <!-- Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_KEY&callback=initMap" defer></script>

<!-- Woosmap -->
<script src="https://sdk.woosmap.com/map/map.js?key=YOUR_WOOSMAP_KEY&callback=initMap" defer></script>

        // Google Maps
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 48.8566, lng: 2.3522 },
  zoom: 13,
});

// Woosmap — same signature, different namespace
const map = new woosmap.map.Map(document.getElementById("map"), {
  center: { lat: 48.8566, lng: 2.3522 },
  zoom: 13,
});

All classes follow the same pattern: replace google.maps with woosmap.map. That applies to Map, Marker, InfoWindow, Circle, Polygon, Polyline, LatLng, LatLngBounds, and event.*.

One difference: the LatLngBounds constructor takes (ne, sw), Google takes (sw, ne).

LatLng keeps lat() and lng() as methods, as in Google: map.getCenter().lat(). Service results are plain { lat, lng } objects, so lat is a property there: location.lat in Localities results, leg.start_location.lat in Directions results.

Map Styling

Woosmap supports the same JSON style format as Google Maps — styles from Snazzy Maps or Google’s style editor work directly. See the style reference for the full list of supported feature types and stylers.

Static Maps

The Static Map API is where parameter formats actually differ:

        # Google Maps
curl "https://maps.googleapis.com/maps/api/staticmap?center=48.8584,2.2945&zoom=15&size=600x400&key=YOUR_GOOGLE_KEY"

# Woosmap
curl -L -o map.webp "https://api.woosmap.com/maps/static?lat=48.8584&lng=2.294351&zoom=15&width=600&height=400&key=YOUR_WOOSMAP_KEY"

Woosmap markers are JSON objects:

        # Google Maps
curl "https://maps.googleapis.com/maps/api/staticmap?center=48.8584,2.2945&zoom=15&size=600x400&markers=color:red|48.8584,2.2945&key=YOUR_GOOGLE_KEY"

# Woosmap, default marker
curl -L -G -o map.webp "https://api.woosmap.com/maps/static?lat=48.8584&lng=2.294351&zoom=15&width=600&height=400&key=YOUR_WOOSMAP_KEY" \
  --data-urlencode 'markers={"lat":48.8584,"lng":2.294351}'

# Woosmap, custom marker image
curl -L -G -o map.webp "https://api.woosmap.com/maps/static?lat=48.8584&lng=2.294351&zoom=15&width=600&height=400&key=YOUR_WOOSMAP_KEY" \
  --data-urlencode 'markers={"lat":48.8584,"lng":2.294351,"url":"https://www.woosmap.com/images/marker-staticmap-2.png?retina=yes"}'

Parameter	Google Maps	Woosmap
Center	`center=lat,lng`	`lat=...&lng=...`
Size	`size=WIDTHxHEIGHT`	`width=...&height=...`
Markers	`color:red` + `lat,lng`, pipe-separated	`markers={"lat":...,"lng":...,"url":"..."}` (JSON)
Retina	`scale=2`	`retina=yes`
Image format	PNG or JPEG	WebP only

Repeat markers once per marker, with one JSON object per value. polylines and polygons work the same way. A JSON array in a single value returns HTTP 422 json_invalid.
There is no color: or label: styling. For a custom marker, set url to an image of 65535 bytes or less. Add @2x to the file name or ?retina=yes to the URL for a retina image. Without url, you get the default marker.

Full parameter list: Static Map API docs. More marker examples: advanced usages.

What Woosmap Doesn’t Cover

If your Google Maps integration uses any of these, they’ll need a separate solution:

Street View — not available in Woosmap.
Traffic, Bicycling, Transit layers — no map overlay equivalents. Woosmap does support transit routing and traffic-aware directions, just not as visual map layers.
Elevation API — not available.
AdvancedMarkerElement — Woosmap uses the traditional Marker class, but you can build custom HTML/CSS markers (example).

‹ External Layer Reference ›