javascript - GMap Drawing tools to image jpeg [static map URL] -
how url of gmap designed entering circles, polygons , rectangles, image, using drawing tools? 
need custom map design , generate image ... find url create static map , make image, code below
this.showimage = function () { var url = "http://maps.googleapis.com/maps/api/staticmap?center=" + map.center + "&zoom=" + map.zoom + "&size=800x600&sensor=false" var div = document.getelementbyid('mapimg'); var img = document.createelement('img'); img.src = url; div.appendchild(img);}
what needs done translate various objects drawingmanager paths (or markers) can rendered on static map.
below start @ drawingmanager static map tool. uses approximation circles (64 points), can adjusted. proof of concept, not complete application.
note: static maps has maximum url size, if many objects added fail. code doesn't make attempt check length.
code snippet:
function createstaticmap() { var fillc, strokec, weight, path; var staticmap = "https://maps.googleapis.com/maps/api/staticmap?size=512x512&maptype=roadmap"; (var = 0; < overlays.length; i++) { if (overlays[i].type == google.maps.drawing.overlaytype.polygon || overlays[i].type == google.maps.drawing.overlaytype.polyline) { path = encodeuricomponent(google.maps.geometry.encoding.encodepath(overlays[i].overlay.getpath())); if (overlays[i].type == google.maps.drawing.overlaytype.polygon) { fillc = overlays[i].overlay.get("fillcolor"); strokec = overlays[i].overlay.get("strokecolor"); weight = overlays[i].overlay.get("strokeweight"); staticmap += "&path="; if (typeof fillc != "undefined") staticmap += "fillcolor:" + fillc.replace(/#/, "0x"); if (typeof weight != "undefined") staticmap += "%7cweight:" + weight; else staticmap += "%7cweight:0"; if (typeof strokec != "undefined") staticmap += "%7ccolor:" + strokec.replace(/#/, "0x"); staticmap += "%7cenc:" + path; } else if (overlays[i].type == google.maps.drawing.overlaytype.polyline) { fillc = overlays[i].overlay.get("fillcolor"); strokec = overlays[i].overlay.get("strokecolor"); weight = overlays[i].overlay.get("strokeweight"); staticmap += "&path="; if (typeof weight != "undefined") staticmap += "weight:" + weight; else staticmap += "weight:2"; if (typeof strokec != "undefined") staticmap += "%7ccolor:" + strokec.replace(/#/, "0x"); staticmap += "%7cenc:" + path; } } else if (overlays[i].type == google.maps.drawing.overlaytype.marker) { staticmap += "&markers=color:blue|" + overlays[i].overlay.getposition().tourlvalue(6); } else if (overlays[i].type == google.maps.drawing.overlaytype.rectangle) { path = []; var north = overlays[i].overlay.getbounds().getnortheast().lat(); var east = overlays[i].overlay.getbounds().getnortheast().lng(); var south = overlays[i].overlay.getbounds().getsouthwest().lat(); var west = overlays[i].overlay.getbounds().getsouthwest().lng(); path.push(new google.maps.latlng(north, east)); path.push(new google.maps.latlng(south, east)); path.push(new google.maps.latlng(south, west)); path.push(new google.maps.latlng(north, west)); path.push(new google.maps.latlng(north, east)); path = encodeuricomponent(google.maps.geometry.encoding.encodepath(path)); fillc = overlays[i].overlay.get("fillcolor"); strokec = overlays[i].overlay.get("strokecolor"); weight = overlays[i].overlay.get("strokeweight"); staticmap += "&path="; if (typeof fillc != "undefined") staticmap += "fillcolor:" + fillc.replace(/#/, "0x"); else staticmap += "fillcolor:blue"; if (typeof weight != "undefined") staticmap += "%7cweight:" + weight; if (typeof strokec != "undefined") staticmap += "%7ccolor:" + strokec.replace(/#/, "0x"); staticmap += "%7cenc:" + path; } else if (overlays[i].type == google.maps.drawing.overlaytype.circle) { path = drawcircle(overlays[i].overlay.getcenter(), overlays[i].overlay.getradius(), 1); path = encodeuricomponent(google.maps.geometry.encoding.encodepath(path)); fillc = overlays[i].overlay.get("fillcolor"); strokec = overlays[i].overlay.get("strokecolor"); weight = overlays[i].overlay.get("strokeweight"); staticmap += "&path="; if (typeof fillc != "undefined") staticmap += "fillcolor:" + fillc.replace(/#/, "0x"); else staticmap += "fillcolor:blue"; if (typeof weight != "undefined") staticmap += "%7cweight:" + weight; if (typeof strokec != "undefined") staticmap += "%7ccolor:" + strokec.replace(/#/, "0x"); staticmap += "%7cenc:" + path; } } document.getelementbyid('staticmap').innerhtml = staticmap; document.getelementbyid('imageholder').innerhtml = "<img src='" + staticmap + "' alt='static map' / > "; document.getelementbyid('urllen').innerhtml = "url length =" + staticmap.length + " characters"; } var geocoder; var map; var overlays = []; var drawingmanager; var selectedshape; var colors = ['#1e90ff', '#ff1493', '#32cd32', '#ff8c00', '#4b0082']; var selectedcolor; var colorbuttons = {}; function initialize() { geocoder = new google.maps.geocoder(); var mapoptions = { center: new google.maps.latlng(-27.37777, -51.592762), zoom: 16 }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); google.maps.event.addlistener(map, 'click', function(evt) { document.getelementbyid('info').innerhtml = evt.latlng.tourlvalue(6); }); var polyoptions = { strokeweight: 0, fillopacity: 0.45, editable: true }; drawingmanager = new google.maps.drawing.drawingmanager({ drawingmode: google.maps.drawing.overlaytype.marker, drawingcontrol: true, drawingcontroloptions: { position: google.maps.controlposition.top_center, drawingmodes: [ google.maps.drawing.overlaytype.marker, google.maps.drawing.overlaytype.circle, google.maps.drawing.overlaytype.polygon, google.maps.drawing.overlaytype.polyline, google.maps.drawing.overlaytype.rectangle ] }, markeroptions: { icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png', draggable: true }, polylineoptions: { editable: true }, rectangleoptions: polyoptions, circleoptions: polyoptions, polygonoptions: polyoptions }); google.maps.event.addlistener(drawingmanager, 'overlaycomplete', function(ovrly) { if (ovrly.type != google.maps.drawing.overlaytype.marker) { // switch non-drawing mode after drawing shape. drawingmanager.setdrawingmode(null); // add event listener selects newly-drawn shape when user // mouses down on it. var newshape = ovrly.overlay; newshape.type = ovrly.type; google.maps.event.addlistener(newshape, 'click', function() { setselection(newshape); }); setselection(newshape); } overlays.push(ovrly); }); drawingmanager.setmap(map); // clear current selection when drawing mode changed, or when // map clicked. google.maps.event.addlistener(drawingmanager, 'drawingmode_changed', clearselection); google.maps.event.addlistener(map, 'click', clearselection); google.maps.event.adddomlistener(document.getelementbyid('delete-button'), 'click', deleteselectedshape); buildcolorpalette(); } google.maps.event.adddomlistener(window, 'load', initialize); function drawcircle(point, radius, dir) { var d2r = math.pi / 180; // degrees radians var r2d = 180 / math.pi; // radians degrees var earthsradius = 6371.0 * 1000.0; // meters; 6371.0 radius of earth in km var points = 64; var start, end; // find raidus in lat/lon var rlat = (radius / earthsradius) * r2d; var rlng = rlat / math.cos(point.lat() * d2r); var extp = []; if (dir == 1) { start = 0; end = points + 1; } // 1 here makes sure connect else { start = points + 1; end = 0; } (var = start; (dir == 1 ? < end : > end); = + dir) { var theta = math.pi * (i / (points / 2)); ey = point.lng() + (rlng * math.cos(theta)); // center + radius x * cos(theta) ex = point.lat() + (rlat * math.sin(theta)); // center b + radius y * sin(theta) extp.push(new google.maps.latlng(ex, ey)); } // alert(extp.length); return extp; } function clearselection() { if (selectedshape) { selectedshape.seteditable(false); selectedshape = null; } } function setselection(shape) { clearselection(); selectedshape = shape; shape.seteditable(true); selectcolor(shape.get('fillcolor') || shape.get('strokecolor')); } function deleteselectedshape() { if (selectedshape) { selectedshape.setmap(null); } } function selectcolor(color) { selectedcolor = color; (var = 0; < colors.length; ++i) { var currcolor = colors[i]; colorbuttons[currcolor].style.border = currcolor == color ? '2px solid #789' : '2px solid #fff'; } // retrieves current options drawing manager , replaces // stroke or fill color appropriate. var polylineoptions = drawingmanager.get('polylineoptions'); polylineoptions.strokecolor = color; drawingmanager.set('polylineoptions', polylineoptions); var rectangleoptions = drawingmanager.get('rectangleoptions'); rectangleoptions.fillcolor = color; drawingmanager.set('rectangleoptions', rectangleoptions); var circleoptions = drawingmanager.get('circleoptions'); circleoptions.fillcolor = color; drawingmanager.set('circleoptions', circleoptions); var polygonoptions = drawingmanager.get('polygonoptions'); polygonoptions.fillcolor = color; drawingmanager.set('polygonoptions', polygonoptions); } function setselectedshapecolor(color) { if (selectedshape) { if (selectedshape.type == google.maps.drawing.overlaytype.polyline) { selectedshape.set('strokecolor', color); } else { selectedshape.set('fillcolor', color); } } } function makecolorbutton(color) { var button = document.createelement('span'); button.classname = 'color-button'; button.style.backgroundcolor = color; google.maps.event.adddomlistener(button, 'click', function() { selectcolor(color); setselectedshapecolor(color); }); return button; } function buildcolorpalette() { var colorpalette = document.getelementbyid('color-palette'); (var = 0; < colors.length; ++i) { var currcolor = colors[i]; var colorbutton = makecolorbutton(currcolor); colorpalette.appendchild(colorbutton); colorbuttons[currcolor] = colorbutton; } selectcolor(colors[0]); }html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } #panel { width: 200px; font-family: arial, sans-serif; font-size: 13px; float: right; margin: 10px; } #color-palette { clear: both; } .color-button { width: 14px; height: 14px; font-size: 0; margin: 2px; float: left; cursor: pointer; } #delete-button { margin-top: 5px; }<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script> <div id="imageholder"></div> <div id="urllen"></div> <div id="info"></div> <div id="panel"> <div id="color-palette"></div> <div> <button id="delete-button">delete selected shape</button> </div> </div> <input type="button" value="create static map" onclick="createstaticmap()" /> <div id="map-canvas" style="border: 2px solid #3872ac;"></div> <div id="staticmap"></div>
Comments
Post a Comment