Using data URI scheme with MarkerImage to create custom markers. Possible?

1,181 views
Skip to first unread message

Kirill

unread,
Jan 9, 2010, 4:15:16 PM1/9/10
to Google Maps JavaScript API v3, appl...@google.com
We have many custom markers and don't want people to have to download
markers that they do not need. We are already using dynamically
generated sprites that have all of our markers:

http://mobile.cityredbird.com/markers_1262979319.png

Is it possible to store individual markers encoded in base64 in our
database and then inline HTML output 'data:image/png;base64' on-demand
into the MarkerImage function?

The reason why we don't want to use the traditional approach is we're
trying to cut down on number of HTTP requests due to mobile
constraints.

Ben Appleton

unread,
Jan 10, 2010, 5:54:11 PM1/10/10
to Kirill, Google Maps JavaScript API v3
I believe this just works.  Have you tried passing a base64 data url to MarkerImage?

Kirill

unread,
Jan 10, 2010, 8:47:38 PM1/10/10
to Google Maps JavaScript API v3
Yup, I tried:

new google.maps.MarkerImage('data:image/
png;base64,iVBORw0KGgoAAAAN...'

Nothing came up. No errors and no markers.

bratliff

unread,
Jan 10, 2010, 9:44:27 PM1/10/10
to Google Maps JavaScript API v3
Sending different embedded images in the HTML will defeat caching.
Can you present a "teaser" page to your users during transfer of the
marker images ? I believe the iPhone will not cache anything over
some limit like 16KB. Keeping individual files under the cache limit
will help. What works best for a first time visitor might not work
best for a returning customer with marker images already cached.

Ben Appleton

unread,
Jan 11, 2010, 12:07:22 AM1/11/10
to google-map...@googlegroups.com
On Mon, Jan 11, 2010 at 12:47 PM, Kirill <zki...@gmail.com> wrote:
> Yup, I tried:
>
> new google.maps.MarkerImage('data:image/
> png;base64,iVBORw0KGgoAAAAN...'

Try the following syntax:
new google.maps.MarkerImage({
icon: 'data:image/png;base64,iVBORw0KGgoAAAAN...'
});

This works for me in Firefox 3.5.7, Chrome and Safari 4.0.3 (all on Windows XP).

> --
> You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
> To post to this group, send email to google-map...@googlegroups.com.
> To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
>
>
>

Kirill

unread,
Jan 11, 2010, 3:28:49 AM1/11/10
to Google Maps JavaScript API v3
Thank you! Confirmed as working. It actually took more processing /
transfer time to fetch marker images using this approach.

Our experimental setup was:

MySQL TEXT data fields containing base64 encoded image binary data.
Our PHP script fetched the images from the database, put them in a
JSON array along with other marker information and passed that array
over to Google Maps.

On Jan 10, 9:07 pm, Ben Appleton <apple...@google.com> wrote:

Reply all
Reply to author
Forward
0 new messages