For Google Maps developers
Custom Google Maps icons, ready to paste.
Design any marker shape, pick from 40,000+ icons, and copy ready-to-use google.maps.Marker snippets with scaledSize and anchor.Point pre-calculated.
How to add custom marker icons to Google Maps
Google Maps lets you replace the default red marker via the icon option on google.maps.Marker. The catch: scaledSize, anchor.Point, and the URL all need to be filled in correctly, and the URL has to be either hosted somewhere or a base64 data URI you embed inline.
MapMarker Studio outputs the complete icon object — scaledSize as a google.maps.Size, anchor as a Point at the right pixel coordinate for the shape, and the SVG as an inline base64 data URI so you don't need to host anything separately.
Free, browser-only, no Google API key required at design time. Paste the snippet into your existing google.maps.Marker setup and you're done.
Export
Save as a file, copy to clipboard, or grab paste-ready code for your map library.
Download
Copy
Google Maps snippet
Frequently asked questions
How do I set the anchor of a custom Google Maps icon?
Use icon.anchor = new google.maps.Point(x, y), where (x, y) is the pixel position on your icon that aligns with the lat/lng. For pins, that's typically (width/2, height) — the bottom center. MapMarker Studio computes this per-shape, so the anchor is correct for pins, flags, speech bubbles, etc.
Can I use SVG markers in Google Maps?
Yes. Pass either a base64 data URI or a hosted URL via icon.url. The data URI approach works offline and avoids any extra HTTP request. MapMarker Studio outputs base64-encoded SVG data URIs ready to paste straight into the snippet.
What's the difference between scaledSize and size in google.maps.Icon?
size is the source dimension; scaledSize is the rendered display size. For an SVG, only scaledSize matters in practice — set it to the marker's display size in pixels and the SVG scales cleanly.
How do I avoid the default red Google Maps marker?
Pass an icon to your google.maps.Marker constructor. Once icon is set, the default red pin is replaced. MapMarker Studio's snippet wires the icon object — url, scaledSize, anchor — correctly out of the box.
Why is my custom Google Maps icon blurry?
Almost always a mismatch between scaledSize and the SVG's natural dimensions, or use of a low-resolution PNG. Stick with SVG and set scaledSize to your intended display size; both are handled automatically by MapMarker Studio.