How to draw polygon shapes in google map

Question

hi i want to draw polygon shapes on google map and serach inbetween that polygon.Please help me out of this. thanks

rubi r · Answer

Google Maps JavaScript API Example: Editable Polylines type=text/javascript> body { font-family: Arial sans serif; font-size: 11px; } #hand_b { width:31px; height:31px; background-image: url(http://google.com/mapfiles/ms/t/Bsu.png); } #hand_b.selected { background-image: url(http://google.com/mapfiles/ms/t/Bsd.png); } #placemark_b { width:31px; height:31px; background-image: url(http://google.com/mapfiles/ms/t/Bmu.png); } #placemark_b.selected { background-image: url(http://google.com/mapfiles/ms/t/Bmd.png); } #line_b { width:31px; height:31px; background-image: url(http://google.com/mapfiles/ms/t/Blu.png); } #line_b.selected { background-image: url(http://google.com/mapfiles/ms/t/Bld.png); } #shape_b { width:31px; height:31px; background-image: url(http://google.com/mapfiles/ms/t/Bpu.png); } #shape_b.selected { background-image: url(http://google.com/mapfiles/ms/t/Bpd.png); } var COLORS = [[red #ff0000] [orange #ff8800] [green#008000] [blue #000080] [purple #800080]]; var options = {}; var lineCounter_ = 0; var shapeCounter_ = 0; var markerCounter_ = 0; var colorIndex_ = 0; var featureTable_; var map; function select(buttonId) { document.getElementById(hand_b).className=unselected; document.getElementById(shape_b).className=unselected; document.getElementById(line_b).className=unselected; document.getElementById(placemark_b).className=unselected; document.getElementById(buttonId).className=selected; } function stopEditing() { select(hand_b); } function getColor(named) { return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1]; } function getIcon(color) { var icon = new GIcon(); icon.image = http://google.com/mapfiles/ms/micons/ + color + .png; icon.iconSize = new GSize(32 32); icon.iconAnchor = new GPoint(15 32); return icon; } function startShape() { select(shape_b); var color = getColor(false); var polygon = new GPolygon([] color 2 0.7 color 0.2); startDrawing(polygon Shape  + (++shapeCounter_) function() { var cell = this; var area = polygon.getArea(); cell.innerHTML = (Math.round(area / 10000) / 100) + km 2 ; } color); } function startLine() { select(line_b); var color = getColor(false); var line = new GPolyline([] color); startDrawing(line Line  + (++lineCounter_) function() { var cell = this; var len = line.getLength(); cell.innerHTML = (Math.round(len / 10) / 100) + km; } color); } function addFeatureEntry(name color) { currentRow_ = document.createElement(tr); var colorCell = document.createElement(td); currentRow_.appendChild(colorCell); colorCell.style.backgroundColor = color; colorCell.style.width = 1em; var nameCell = document.createElement(td); currentRow_.appendChild(nameCell); nameCell.innerHTML = name; var descriptionCell = document.createElement(td); currentRow_.appendChild(descriptionCell); featureTable_.appendChild(currentRow_); return {desc: descriptionCell color: colorCell}; } function startDrawing(poly name onUpdate color) { map.addOverlay(poly); poly.enableDrawing(options); poly.enableEditing({onEvent: mouseover}); poly.disableEditing({onEvent: mouseout}); GEvent.addListener(poly endline function() { select(hand_b); var cells = addFeatureEntry(name color); GEvent.bind(poly lineupdated cells.desc onUpdate); GEvent.addListener(poly click function(latlng index) { if (typeof index == number) { poly.deleteVertex(index); } else { var newColor = getColor(false); cells.color.style.backgroundColor = newColor poly.setStrokeStyle({color: newColor weight: 4}); } }); }); } function placeMarker() { select(placemark_b); var listener = GEvent.addListener(map click function(overlay latlng) { if (latlng) { select(hand_b); GEvent.removeListener(listener); var color = getColor(true); var marker = new GMarker(latlng {icon: getIcon(color) draggable: true}); map.addOverlay(marker); var cells = addFeatureEntry(Placemark  + (++markerCounter_) color); updateMarker(marker cells); GEvent.addListener(marker dragend function() { updateMarker(marker cells); }); GEvent.addListener(marker click function() { updateMarker(marker cells true); }); } }); } function updateMarker(marker cells opt_changeColor) { if (opt_changeColor) { var color = getColor(true); marker.setImage(getIcon(color).image); cells.color.style.backgroundColor = color; } var latlng = marker.getPoint(); cells.desc.innerHTML = ( + Math.round(latlng.y * 100) / 100 +   + Math.round(latlng.x * 100) / 100 + ); } function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById(map)); map.setCenter(new GLatLng(37.4419 -122.1419) 13); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.clearOverlays(); featureTable_ = document.getElementById(featuretbody); select(hand_b); } } onclick=stopEditing()/> onclick=placeMarker()/> onclick=startLine()/> onclick=startShape()/> To draw on the map click on one of the buttons and then click on the map. Double-click to stop drawing a line or shape. Click on an element to change color. To edit a line or shape mouse over it and drag the points. Click on a point to delete it.

Bogdan Bogdan · Answer

Nice post. But how can i save the drawn polygons in SQL and then load the back? Thanks in advance Bogdan