javascript - Pass google maps coordinates to marker -
i looking pass set of coordinates received 2 textfields(displaylat , displaylong) , create marker passed in coordinates marker location. code far:
<html> <head> <script> function initialize() { var markersarray = []; //array hold map markers function clearoverlays() { //function clear markers arrays, deleting them map (var = 0; < markersarray.length; i++ ) { markersarray[i].setmap(null); } markersarray.length = 0; } var mapprop = { //the actual map in page center:new google.maps.latlng(51.8978719,-8.471087399999988), //center of map zoom:12, //zoom level maptypeid:google.maps.maptypeid.roadmap //kind of map }; var map=new google.maps.map(document.getelementbyid("googlemap") //element id ,mapprop); google.maps.event.addlistener(map, 'rightclick', function(event) { //what happens when map right clicked clearoverlays(); //removes current markers form map }); function placemarker(location) { //place marker function, adds marker passed in location var marker = new google.maps.marker({ position: location, map: map, }) markersarray.push(marker); //adds new marker markers array google.maps.event.addlistener(marker,"click",function(){}); ; google.maps.event.addlistener(marker, 'click', function() { //listener when marker clicked infowindow pops infowindow.open(map,marker); }); } } function inputcoords() { var inputlat = document.getelementbyid('displaylat').value; var inputlng = document.getelementbyid('displaylong').value; var newlatlng = new google.maps.latlng(inputlat, inputlng); document.getelementbyid("button1").innerhtml=newlatlng; placemarker(newlatlng); document.getelementbyid("button1").innerhtml="past var dec"; } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="googlemap" style="width:500px;height:380px;"></div> lat 1:<input type="text" size="20" maxlength="50" name="displaylat" id ="displaylat" value=""><br /> long 1:<input type="text" size="20" maxlength="50" name="displaylong" id="displaylong" value=""><br /> <button onclick="inputcoords()">input coordinates</button> <p id="button1"></p> </body> </html>
so far passing in coordinates, converting them google.maps.latlng object not getting passed placemarker function far can tell. in advance.
function inputcoords()
calls function placemarker()
not visible because local initialize()
function. have place out of it. , make variables map
, markersarray
global.
see example @ jsbin.
you can add:
map.setcenter(location);
to placemarker()
function see marker if location off current visible part of map.
Comments
Post a Comment