Geek Answers Handbook

Can I use multiple images as Google Maps v3 MarkerImage?

I want the map marker to consist of three images. Two images will be the same in all markers, where one is variable. There seems to be no way to specify multiple images in the MarkerImage class. The only way I can think of is to draw all the images on the canvas and then output it as png dataURL for the MarkerImage class. However, this seems like a bust.

+4
source share
5 answers

I do not think this is possible with three separate images.

If the two images are always the same, I think you could combine them into one and save them in the icon property, and then use the variable image in the shadow property or vice versa (the icon will always be on top of the shadow). You just need to manipulate the size and position of the MarkerImage objects.

working example: http://jsfiddle.net/mG4uz/1/

 var image1 = new google.maps.MarkerImage( 'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png', new google.maps.Size(45, 90), //adjust size of image placeholder new google.maps.Point(0, 0), //origin new google.maps.Point(0, 25) //anchor point ); var image2 = new google.maps.MarkerImage( 'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png', new google.maps.Size(45, 45), new google.maps.Point(0, 0), new google.maps.Point(0, 0) ); var marker = new google.maps.Marker({ position: centerPosition, map: map, icon: image1, shadow:image2 });
+8
source

I would try to define a new class that inherits from google.maps.MarkerImage , which will allow this, and then simply call marker.setIcon() with this object.

Also look here and here .

+1
source

Yes, you can use multiple images and set them as one image for each marker icon in your array of map markers.

More importantly, you can use images that are on a remote server. For example, in my case, I downloaded an array of sites, each of which has an image for the site, so I combine the marker image with the image of the site (received from the server). Here is my solution:

 mergeImages(element) { var canvas: HTMLCanvasElement = this.canvas.nativeElement; var context = canvas.getContext('2d'); let img1 = new Image(); let img2 = new Image(); img1.onload = function () { canvas.width = img1.width; canvas.height = img1.height; img2.crossOrigin = 'anonymous'; img2.src = element.info.image || './assets/img/markers/markerIcon42.png'; }; img2.onload = () => { context.clearRect(0, 0, canvas.width, canvas.height); context.globalAlpha = 1.0; context.drawImage(img1, 0, 0); context.globalAlpha = 1; //Remove if pngs have alpha context.globalCompositeOperation = 'destination-over'; if (element.info.image === null) { context.drawImage(img2, 11, 4, 42, 42); } else { context.drawImage(img2, 15, 7, 35, 35); } var dataURL = canvas.toDataURL('image/png', 1.0); console.log(dataURL); this.markers.push({ lat: element.info.location.latitude, lng: element.info.location.longitude, controllerInfo: element.info, icon: { url: dataURL, labelOrigin: { x: 32, y: -10 }, scaledSize: { width: 64, height: 64 }, origin: { x: 0, y: 0 }, anchoriconAnchor: { x: 7, y: 7 }, }, controllerStaus: element.status, label: { text: element.info.siteName, color: "#ED2C2C", fontWeight: "500", fontSize: "14px" } }); console.log(this.markers); }; img1.src = './assets/img/markers/map-marker64.png'; }

One important thing to add is "img2.crossOrigin = 'anonymous';" this will prevent the toDataUrl cors-orign error.

This solution is also suitable for clustering.

Hope this helps

+1
source

Why do you all think so?

This sample code is also a bit indecently selected ... shadow: image2 ??

As soon as two images are defined by var - they are available (it may be necessary to define globally, it depends on the specific application)

If you need more icons just paste them into an array ...

and you will need to create individual graphics for each possible combination ... because the MarkerImage object just supports 1 image and 1 shadow.

0
source

You can use the excellent small library, RichMarker . Its documentation is here .

You can even inherit it and create your own marker class, for example:

 Ns.Marker = function(properties) { RichMarker.call(this, properties); this.setContent('<div class="three-images-marker">' + properties.NsImage1 ? '<div class="marker-image-1"><img src="'+properties.NsImage1+'"/></div>' : '' + properties.NsImage2 ? '<div class="marker-image-2"><img src="'+properties.NsImage2+'"/></div>' : '' + properties.NsImage3 ? '<div class="marker-image-3"><img src="'+properties.NsImage3+'"/></div>'+ '</div>'); }; Ns.Marker.prototype = Object.create(RichMarker.prototype);

And then use it like this:

 var gorgeousMarker = new Ns.Marker({ position: yourMarkerLatlng, map: yourMap, NsImage1: 'example.com/image1.png', NsImage2: 'example.com/image2.png', NsImage3: 'example.com/image3.png', });

'Ns' is any namespace that you use.

From now on, CSS works, you can put images as you like.

0
source

More articles:


All Articles