javascript - I need to add many markers to Google maps api and add notes to them using prompt() -
i have done following; made markers on click, prompt() , need connect , save browser. when click map calls prompt("add notes") , need save marker , show note when click on marker again.
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="script" href="script.js" />` <script src="jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js? sensor=false"></script> <!-- latest compiled , minified css --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jquery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- latest compiled javascript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js? key=aizasydxhwwzynap1ud89ol43dc725fzy_-98jw&callback=initmap"> </script> <script type="text/javascript" src="http://maps.google.com/maps/api/js? libraries=places&sensor=false"></script> <script src="https://apis.google.com/js/platform.js" async defer></script> <script> var xhttp = new xmlhttprequest(); var map; function initmap() { map = new google.maps.map(document.getelementbyid('map'), { center: {lat: 51.0593325, lng: 15.1854451}, zoom: 5 }); google.maps.event.addlistener(map, 'click', function(event) { addmarker(event.latlng, map); var poznamka = prompt("zadaj svoju poznámku k miestu."); var card = new map.card(); card.getbody().innerhtml = poznamka; var naparsovane = json.parse(localstorage.getitem('map')); if(a == []){ var index = 0; } else{ var index = a.length; } }); var infowindow = new google.maps.infowindow({map: map}); // geolocation if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; infowindow.setposition(pos); infowindow.setcontent('tvoja aktuálna poloha.'); map.setcenter(pos); }, function() { handlelocationerror(true, infowindow, map.getcenter()); }); } else { // browser doesn't support geolocation handlelocationerror(false, infowindow, map.getcenter()); } function handlelocationerror(browserhasgeolocation, infowindow, pos) { infowindow.setposition(pos); infowindow.setcontent(browserhasgeolocation ? 'error: určenie tvojej polohy zlyhalo.': 'error: tvoj prehliadač nepodporuje určenie polohy.'); } // ak uživatel klikne na mapu zobrazí sa marker, každému markru je pridelený prvý volný index var labels = 'abcdefghijklmnopqrstuvxyz'; var labelindex = 0; // pridá marker mapy function addmarker(location, map) { // vyberie prvý voľný index, na ktorý uloží marker aby neprepísal už obsadený // var marker = new google.maps.marker({ position: location, label: labels[labelindex++ % labels.length], map: map, draggable: true, editable: true }); } } // google.maps.event.adddomlistener(window, 'load', initmap); </script>`
i don't have sufficient points comment, answering here.
from understand, when click on map text enter on prompt should displayed when click on marker gets created. here's fiddle - http://jsfiddle.net/pn992yy4/31/. message enter in prompt displayed on marker's info window when click on it.
basically, modified addmarker function call function called attachnote takes in parameters marker , message entered in prompt dialog. addmarker function attaches message provided marker's info window.
function attachnote(marker, note) { var infowindow = new google.maps.infowindow({ content: note }); marker.addlistener('click', function() { infowindow.open(marker.get('map'), marker); }); } the addmarker function call on click event should have poznamka.
addmarker(event.latlng, map, poznamka); hope answer helps. let me know if not.
Comments
Post a Comment