Question

I use a marker image on various places on a website. A user has the option for image upload. That size might be right for the site, but for a marker it’s a bit big in many cases, so I want to use the API functions to detect big images and then resize them.

I can’t get the API to return me the current image size. The code now looks like something like this:

var iconImg = new google.maps.MarkerImage('/'+myTrailers.getIcon(dataitem));
// TODO:  place resize function here **
var marker = new google.maps.Marker({position: pos, map: myMap.map, content: html, icon: iconImg, id: dataitem.unit_id});

I tried using these functions
googleMapsAPI-MarkerImage
but somehow the function doesn’t work

OrgSize = iconImg.size();

If I can detect the original size of the image, I can use it to calculate the new size something like this.

if(OrgSize[x] > 20){
    NewSize[x] = 20;
    NewSize[y] = OrgSize[y] * (NewSize[x] / OrgSize[x]);

Anybody a idea how to get the image size using the google maps API? Or some funky alternative?

Many thanks.

Answer 1

There is no practial way to do this via JavaScript. The size property that you refer to is used to specify what the icon size is, not to get the icon size).

If users are uploading the image, you can either use server-side code to resize the image as needed or you can use the server-side code to acesss the image dimensions and include those dimensions as attributes in the data sent as part of dataItem. If everything is a standard size on your server (i.e., images are all the same size), then you don’t need to adjust icon size per icon image. If you have variable sized images, then you need to use the size property with each image to declare what the size is and then use the scaledSize property to scale each image accordingly.