html - Save Map Instance outside of Google Maps -
i've made google maps api (html) script created markers when user clicks on map. i've integrated google+ login functions users unique , have profiles. want make users can create markers on desired positions , save map can come later. don't want them use "https://developers.google.com/maps/documentation/javascript/examples/save-widget" provided function because markers synched google+. in other words want markers save website, not personal google maps. how go saving state of map on site? heres fiddle of code: https://jsfiddle.net/hgvsurt5/ heres code:
<head> <style> #map-canvas { width: 900px; height: 600px; } .controls { margin-top: 16px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #pac-input { background-color: #fff; font-family: roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 400px; } #pac-input:focus { border-color: #4d90fe; } .pac-container { font-family: roboto; } #type-selector { color: #fff; background-color: #4d90fe; padding: 5px 11px 0px 11px; } #type-selector label { font-family: roboto; font-size: 13px; font-weight: 300; } </style> <title>places search box</title> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> <script> // example adds search box map, using google place autocomplete // feature. people can enter geographical searches. search box return // pick list containing mix of places , predicted search terms. function initialize() { var marker = [] var map = new google.maps.map(document.getelementbyid('map-canvas'), { maptypeid: google.maps.maptypeid.roadmap }); var defaultbounds = new google.maps.latlngbounds( new google.maps.latlng(-33.8902, 151.1759), new google.maps.latlng(-33.8474, 151.2631)); map.fitbounds(defaultbounds); // create search box , link ui element. var input = /** @type {htmlinputelement} */ ( document.getelementbyid('pac-input')); map.controls[google.maps.controlposition.top_left].push(input); var searchbox = new google.maps.places.searchbox( /** @type {htmlinputelement} */ (input)); // [start region_getplaces] // listen event fired when user selects item // pick list. retrieve matching places item. google.maps.event.addlistener(searchbox, 'places_changed', function() { var places = searchbox.getplaces(); if (places.length == 0) { return; } </script> <script> var map; var mycenter = new google.maps.latlng(51.508742, -0.120850); function initialize() { var mapprop = { center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("googlemap"), mapprop); google.maps.event.addlistener(map, 'click', function(event) { placemarker(event.latlng); }); } function placemarker(location) { var marker = new google.maps.marker({ position: location, map: map, draggable: true, }); var infowindow = new google.maps.infowindow({ content: 'latitude: ' + location.lat() + '<br>longitude: ' + location.lng() }); infowindow.open(map, marker); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="googlemap" style="width:900px;height:600px;"></div> </body>
you must somehow bring desired data format may sended , stored. approach use data-layer draw features on map, may use method togeojson of data-layer convert data geojson , send server(where store data).
a simple implementation:
function initialize() { var map = new google.maps.map(document.getelementbyid("googlemap"), { center: new google.maps.latlng(51.508742, -0.120850), zoom: 5, noclear: true }), //this may stored data data = { "type": "featurecollection", "features": [{ "type": "feature", "geometry": { "type": "point", "coordinates": [-0.120850, 51.508742] }, "properties": {} }] }, win = new google.maps.infowindow, //some buttons interaction ctrl = document.getelementbyid('datactrl'), fx = { 'data-save': { click: function() { //use method store data somewhere, //e.g. send server map.data.togeojson(function(json) { data = json; }); } }, 'data-show': { click: function() { alert('you may send json-string server , store there:\n\n' + json.stringify(data)) } }, 'data-load': { click: function() { //use method load data somwhere //e.g. server via loadgeojson map.data.foreach(function(f) { map.data.remove(f); }); map.data.addgeojson(data) }, init: true }, 'data-clear': { click: function() { //use method clear data //when want remove data on server //send geojson empty features-array server map.data.foreach(function(f) { map.data.remove(f); }); data = { type: "featurecollection", features: [] }; } } }; (var id in fx) { var o = ctrl.queryselector('input[id=' + id + ']'); google.maps.event.adddomlistener(o, 'click', fx[id].click); if (fx[id].init) { google.maps.event.trigger(o, 'click'); } } map.controls[google.maps.controlposition.top_center].push(ctrl); function placemarker(location) { var feature = new google.maps.data.feature({ geometry: location }); map.data.add(feature); } google.maps.event.addlistener(map, 'click', function(event) { placemarker(event.latlng); }); google.maps.event.addlistener(map.data, 'click', function(e) { if (e.feature.getgeometry().gettype() === 'point') { win.setoptions({ content: 'latitude: ' + e.feature.getgeometry().get().lat() + '<br>longitude: ' + e.feature.getgeometry().get().lng(), pixeloffset: new google.maps.size(0, -40), map: map, position: e.feature.getgeometry().get() }); } }); } google.maps.event.adddomlistener(window, 'load', initialize);html, body, #googlemap { height: 100%; margin: 0; padding: 0; }<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> <div id="googlemap"> <div id="datactrl"> <input type="button" id="data-save" value="save" /> <input type="button" id="data-show" value="show saved data" /> <input type="button" id="data-load" value="load saved data" /> <input type="button" id="data-clear" value="remove data" /> </div> </div>
Comments
Post a Comment