How to set marker in google map using javascript

javascript jquery html google-maps google-maps-markers

20,348

Solution 1

please try this. hope it help. 1. make map as global variable. 2. initialize map 3. add marker on 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 sample code.

<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>

Solution 2

data is array which contains lat and lng

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

20,348

Author by

Monk L

Updated on February 01, 2020

Comments

Monk L over 4 years

I am using the below javascript code to show map and marker.The marker is loading while map load,but i want to load the marker if the button named "Add marker" is clicked.The marker should points to the current location.How to do this 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

Monk L almost 11 years

i updated these function "var marker = new google.maps.Marker" with you function,it is not working
Sankalp Mishra almost 11 years

If you want to have multiple markers..Use it recursively. For just one marker use it without function and place it after you define var map
Monk L almost 11 years

This map is loading,but onclicking add marker,marker is not comes to display
Monk L almost 11 years

I am getting this error "Uncaught TypeError: Cannot read property 'lat' of undefined "
Sankalp Mishra almost 11 years

have you put your lat and lang in data array??
Hasina almost 11 years

@MonkL, please set the position attribute as new google.maps.Latlng(latitude, longitude); i have checked this code. it is adding Marker on button click in map.
Monk L almost 11 years

Yes,i tested your code in separate html,it is working need one more help.Now the marker is set to some fixed lat and logitude,i need it to set at current place,can you tell me how to do.
Hasina almost 11 years

@MonkL,i am so sorry. i have not ever tried for fetching current location. but google map provides api for fetching current location. you can implement it by searching for google map.
Hasina almost 11 years

@MonkL, you can get current location using answer of this stackoverflow.com/questions/13780583/…