All geek questions in one place

How to set marker on google map using javascript

I am using the javascript code below to display a map and marker. The marker is loaded when the map is loaded, but I want to load the marker if a button with the name "Add marker" is pressed. The marker should indicate the current location. How to do it here.

JS.

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var geocoder = new google.maps.Geocoder(); function updateMarkerStatus(str) { document.getElementById('markerStatus').innerHTML = str; } function updateMarkerPosition(latLng) { document.getElementById('info').innerHTML = [ latLng.lat(), latLng.lng() ].join(', '); } function updateMarkerAddress(str) { document.getElementById('address').innerHTML = str; } function initialize() { var latLng = new google.maps.LatLng(-29.3456, 151.4346); var map = new google.maps.Map(document.getElementById('mapCanvas'), { zoom: 8, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ position: latLng, title: 'Marker', map: map, draggable: true }); }; google.maps.event.addDomListener(window, 'load', initialize); </script>

HTML

 <div id="mapCanvas"></div>

thanks

+4
source share
4 answers

try it. hope this helps. 1. Make a map of the global variable. 2. initialize the map 3. add a marker to the button click event.

 <script type="text/javascript"> var map; function initialize() { map = new google.maps.Map(document.getElementById('mapCanvas'), { zoom: 8, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); }; jQuery("$addmarker").click(function(){ var marker = new google.maps.Marker({ position: new google.maps.LatLng(23.72, 72.100), title: 'Marker', map: map, draggable: true }); }) </script>

Here is my complete code example.

 <script type="text/javascript"> var map; function initialize() { var mapOptions = { center: new google.maps.LatLng('23.11', '71.00'), zoom: 2, scrollwheel: false, disableDefaultUI: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); } function addMarker() { marker = new google.maps.Marker({ position: new google.maps.LatLng(23.72, 72.100), map: map, }); } </script> </HEAD> <BODY onload="initialize();"> <div id="map_canvas" style="width:700px; height:500px;"></div> <input type="button" id="addMarker" value="addMarker" onclick="addMarker();"/> </BODY> </HTML>
+4
source

data is an array that contains lat and lng

  function addMarker(data) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(data.lat, data.lng), map: map });
+3
source

You need to place the item:

 var marker = new google.maps.Marker({ [...] });

inside the onclick event listener.

The jQuery way to do this is with the button element:

 $('button').on('click', function() { var marker = new google.maps.Marker({ [...] }); });

You need to think about making the map and latLng variables global.

0
source 
 var map; // Declare map as global. function initialize() { var latLng = new google.maps.LatLng(-29.3456, 151.4346); map = new google.maps.Map(document.getElementById('mapCanvas'), { zoom: 8, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); } // Call addMarker on click of the button. function addMarker(){ var latLng = new google.maps.LatLng(-29.3456, 151.4346); // Put lat long as desired. var marker = new google.maps.Marker({ position: latLng, title: 'Marker', map: map, draggable: true }); }
-1
source

Source: https://habr.com/ru/post/1484343/

More articles:


All Articles