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 · Accepted Answer · 2013-06-04T07:58:51.390

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 04 '13 at 07:58

answered Jun 04 '13 at 07:06

Hasina

745
5
15

This map is loading,but onclicking add marker,marker is not comes to display – Monk L Jun 04 '13 at 07:39
@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. – Hasina Jun 04 '13 at 07:54
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. – Monk L Jun 04 '13 at 08:06
@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 Jun 04 '13 at 08:51
@MonkL, you can get current location using answer of this http://stackoverflow.com/questions/13780583/get-current-location-on-google-map – Hasina Jun 04 '13 at 08:59

score 3 · Answer 2 · answered Jun 04 '13 at 07:05

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 04 '13 at 07:05

Engineer

5,911
4
31
58

i updated these function "var marker = new google.maps.Marker" with you function,it is not working – Monk L Jun 04 '13 at 07:38
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 – Engineer Jun 04 '13 at 07:39
I am getting this error "Uncaught TypeError: Cannot read property 'lat' of undefined " – Monk L Jun 04 '13 at 07:45
have you put your lat and lang in data array?? – Engineer Jun 04 '13 at 07:49

score 0 · Answer 3 · edited Jun 04 '13 at 07:19

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 04 '13 at 07:19

Irvin Dominin

30,819
9
77
111

answered Jun 04 '13 at 07:06

michelgotta

976
8
11

score -1 · Answer 4 · answered Jun 04 '13 at 07:08

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

How to set marker in google map using javascript

4 Answers4