Google Maps – place marker with radius
Location of the marker in the map by mouse event. The system draws a radius around a point by a specified distance.
Try the following example:
(Hint: Click the map, set a larger radius)
| Distance radius: | meters |
| Center to marker: | |
| Marker center: | (lat)
(lng) |
| Draw point to location | |
| Set location: | Lat: |
| Lng: | |
The source code is here:
Objective-C
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 |
<!DOCTYPE html> <html> <head> <title>Accessing arguments in UI events</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> //create empty temp array var markersArray = []; var circlesArray = []; //map property var map; function initialize() { //define map var mapOptions = { zoom: 7, center: new google.maps.LatLng(49.7954,15.2490), mapTypeId: google.maps.MapTypeId.ROADMAP }; //create new map map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //add click event google.maps.event.addListener(map, 'click', function(e) { var distance = parseInt(document.getElementById('mapdistance').value); if( distance < 1 ){ alert('Your distance is too small'); } //clear map removeMarkersAndCircles(); //draw marker with circle placeMarker(e.latLng, map, distance); //write actual position into inputs writeLabels(e.latLng); }); } //function to place marker into map function placeMarker(position, map, distance) { // Create marker var marker = new google.maps.Marker({ map: map, position: position, title: 'Center' }); //center map after click var iscenteractive = document.getElementById("mapcenter").checked if( iscenteractive ) map.setCenter(position); //add marker into temp array markersArray.push(marker); //Add circle overlay and bind to marker var circle = new google.maps.Circle({ map: map, radius: distance, fillColor: '#AA0000' }); circle.bindTo('center', marker, 'position'); circlesArray.push(circle); } //remove all markers from map function removeMarkersAndCircles() { if (markersArray) { for (i=0; i < markersArray.length; i++) { markersArray[i].setMap(null); circlesArray[i].setMap(null); } markersArray.length = 0; circlesArray.length = 0; } } //write labels into inputs function writeLabels(position){ document.getElementById('maplat').value = position.lat(); document.getElementById('maplng').value = position.lng(); } //draw marker and circle by location function drawByLocation(){ var distance = parseInt(document.getElementById('mapdistance').value); if( distance < 1 ){ alert('Your distance is too small'); } //get values from inputs var lat = document.getElementById('mapsetlat').value; var lng = document.getElementById('mapsetlng').value; var position = new google.maps.LatLng(lat, lng); //create marker and circle removeMarkersAndCircles(); placeMarker(position, map, distance); writeLabels(position); } //initialize map google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body style="font-family: monospace"> <div style="width: 500px; border: 1px solid silver; padding: 10px; margin: 10px;"> <table> <tr> <td>Distance radius:</td> <td><input type="text" id="mapdistance" value="10000" /> meters</td> </tr> <tr> <td>Center to marker:</td> <td><input type="checkbox" id="mapcenter" /></td> </tr> <tr> <td>Marker center:</td> <td><input type="text" id="maplat" value="" disabled /> (lat)<br /> <input type="text" id="maplng" value="" disabled /> (lng) </td> </tr> </table> </div> <div style="width: 500px; border: 1px solid silver; padding: 10px; margin: 10px;"> <div style="height: 500px;" id="map-canvas"></div> </div> <div style="width: 500px; border: 1px solid silver; padding: 10px; margin: 10px;"> <table> <tr> <td>Draw point to location</td> <td> </td> </tr> <tr> <td>Set location:</td> <td> Lat: <input type="text" id="mapsetlat" value="50.5692"/> </td> </tr> <tr> <td></td> <td> Lng: <input type="text" id="mapsetlng" value="15.9411"/> </td> </tr> <tr> <td></td> <td> <input type="submit" id="drawpoint" value="draw point on this place" onclick="drawByLocation();"/> </td> </tr> </table> </div> </body> </html> |
Posted on 20 June 2013
pri draw point by bolo dobre vycentrovať mapu na ten bod
WD