How to set marker in google map using javascript

Question

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

Hasina Ansari · Accepted Answer · 2013-06-04 07:58:51Z

6

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>

edited Jun 4, 2013 at 7:58

answered Jun 4, 2013 at 7:06

Hasina Ansari

8456 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Monk L Over a year ago

This map is loading,but onclicking add marker,marker is not comes to display

Hasina Ansari Over a year ago

@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 Over a year ago

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 Ansari Over a year ago

@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 Ansari Over a year ago

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

William Buttlicker · Accepted Answer · 2013-06-04 07:05:13Z

3

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
        });

answered Jun 4, 2013 at 7:05

William Buttlicker

6,0005 gold badges36 silver badges59 bronze badges

4 Comments

Monk L Over a year ago

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

William Buttlicker Over a year ago

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 Over a year ago

I am getting this error "Uncaught TypeError: Cannot read property 'lat' of undefined "

William Buttlicker Over a year ago

have you put your lat and lang in data array??

Irvin Dominin · Accepted Answer · 2013-06-04 07:19:53Z

0

You need to put the part:

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

inside a onclick event listener.

The jQuery way to do this with a button element:

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

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

edited Jun 4, 2013 at 7:19

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

answered Jun 4, 2013 at 7:06

michelgotta

1,0018 silver badges11 bronze badges

Comments

Subir Kumar Sao · Accepted Answer · 2013-06-04 07:08:34Z

-1

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
  });
}

answered Jun 4, 2013 at 7:08

Subir Kumar Sao

8,4393 gold badges28 silver badges51 bronze badges

Collectives™ on Stack Overflow

How to set marker in google map using javascript

4 Answers 4

5 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related