This example code updates a set of input fields with latitude-longitude values in response to mouse clicks on an instance of Google Maps. It can also redraw map markers upon typing in new coordinates.<\/p>\n
\r\n<html>\r\n <head>\r\n <style type=\"text\/css\">\r\n html { height: 100% }\r\n body { height: 100%; margin: 10; padding: 10 }\r\n #map_canvas { height: 100% }\r\n <\/style>\r\n <script type=\"text\/javascript\" src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?sensor=true\"><\/script>\r\n <script type=\"text\/javascript\">\r\n var map;\r\n var currMarker = new google.maps.Marker();\r\n\r\n function initialize() {\r\n var myLatLng = new google.maps.LatLng(0, 0);\r\n var mapOptions = {\r\n center: myLatLng,\r\n zoom: 1,\r\n mapTypeId: google.maps.MapTypeId.ROADMAP\r\n };\r\n map = new google.maps.Map(document.getElementById(\"map_canvas\"),\r\n mapOptions);\r\n\r\n google.maps.event.addListener(map, 'click', function(event) {\r\n placeMarker(event.latLng);\r\n });\r\n }\r\n\r\n function placeMarker(location) {\r\n currMarker.setMap(null);\r\n var marker = new google.maps.Marker({\r\n position: location,\r\n map: map\r\n }); \r\n currMarker=marker;\r\n\r\n document.getElementById(\"lat\").value=location.lat();\r\n document.getElementById(\"lng\").value=location.lng();\r\n }\r\n\r\n function updateMarker() {\r\n currMarker.setMap(null);\r\n var lat = document.getElementById(\"lat\").value;\r\n var lng = document.getElementById(\"lng\").value;\r\n var newLatLng = new google.maps.LatLng(lat, lng);\r\n var marker = new google.maps.Marker({\r\n position: newLatLng,\r\n map: map\r\n }); \r\n currMarker=marker;\r\n }\r\n <\/script>\r\n <\/head>\r\n <body onload=\"initialize()\">\r\n <p>\r\n <div id=\"map_canvas\" style=\"width:400px; height:400px\"><\/div>\r\n <div id=\"coordinates\">\r\n lat: <input id=\"lat\" type=\"text\" onchange=\"updateMarker()\" value=\"0\" \/>\r\n lng: <input id=\"lng\" type=\"text\" onchange=\"updateMarker()\" value=\"0\" \/>\r\n <\/div>\r\n <\/p>\r\n <\/body>\r\n<\/html>\r\n<\/xmp><\/pre>\n<p>Below is a screenshot of what the code creates:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.dev-notes.com\/blog\/wp-content\/uploads\/2018\/06\/20180626-Map-Screenshot.jpg\" alt=\"\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following sample illustrates interaction with Google Maps using mouse clicks and text field updates.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-141","post","type-post","status-publish","format-standard","hentry","category-google-maps"],"_links":{"self":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":7,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/141\/revisions"}],"predecessor-version":[{"id":288,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/141\/revisions\/288"}],"wp:attachment":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/media?parent=141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/categories?post=141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/tags?post=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}