Geek Answers Handbook

How to take a google map snapshot with a polyline and openInfoWindowHtml

I'm working on functionality to take a snapshot of a google map with polylines and open a popup on a polyline by clicking on a google map. Running a google map snapshot with polylines. but it will not be able to display the pop-up snapshot on the polyline. the polyline is shown in the sanpshot, but the info window is not displayed. Here is the code for the snapshot.

This code is for initializing the javascript onload control code:

var snapShotControlOptions = { hidden: true }; snapShotControlOptions.buttonLabelHtml="<snap id='snap' style='display:none' >snap</span>" snapShotControl = new SnapShotControl(snapShotControlOptions); map.addControl(snapShotControl);

here this method takes a binding to take a sanp snapshot on a google map.

  function takeSnap() { //static map size var sizeStr = "640x640"; var imgSize = ""; if (sizeStr != "") { var sizeArray = sizeStr.split("x"); imgSize = new GSize(sizeArray[0], sizeArray[1]); } snapShotControl.setMapSize(imgSize); var format = "jpg"; snapShotControl.setFormat(format); var url = snapShotControl.getImage(); // document.getElementById("snapshot_canvas").src = url; SaveImage(url); // } //this will add polyline overlay to draw line on google map with different color of polyline on google map . var polyline = directionsArray[num].getPolyline(); polyline.setStrokeStyle({ color: streetColor, weight: 3, opacity: 0.7 }); polyline.ssColor=streetColor; map.addOverlay(polyline); ///this code will open the pop info window on polyline those polyline created on google map

and the problem is that it is a popup that is not included in sanpshot when I take a google map snapshot.

  var MousePoint = ""; var marker; GEvent.addListener(map, "mousemove", function (point) { MousePoint = new GLatLng(point.lat(), point.lng()); }); GEvent.addListener(polyline, "click", function () { map.openInfoWindowHtml(MousePoint, headMarkerHtml); }); GEvent.addListener(polyline, "mouseout", function () { // map.closeInfoWindow(); });

Could you tell me who I am passing the pop-up window into the polyline overlay.

I have javascript snapshotcontrol.js file to take a snapshot.

+6
source share
1 answer

from source snapshotcontrol

This library makes it easy to create a snapshot image of your interactive map using the Google Static Maps API.

Static maps do not support info windows or something like adding custom text to a map https://developers.google.com/maps/documentation/staticmaps/index

You can draw a map on canvas in a browser, then draw an info window on top of it using http://html2canvas.hertzen.com/ and then load the contents of the canvas

0
source

More articles:


All Articles