adding marker on google map when i click button

Question

i want to add marker on a google map where by my ng-click pass the object which have latitude and longitude so that it will put the marker to the map.....any help plz

example code HTML

<a class="button icon icon-right  ion-location"  href="location.html"  ng-click="search_item(item)">

call function

$scope.search_item = function (item){
lat = item.lat;
lng = item.lng
}

marker code

var myLatlng = new google.maps.LatLng(lat, long);
 var mapOptions = {
  zoom: 15,
  center: myLatlng
 }
 var map = new google.maps.Map(document.getElementById("map"), mapOptions);

 var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
 });

Consider creating a jsFiddle (jsfiddle.net) and reproducing the problem. Firstly you may have a eureka moment when doing so and secondly it makes it very easy for others to help you out. It would also help to know what is happening when you attempt it using your code. — Matt, Jun 21 '16 at 13:56

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

This question seems to have been answered here and an example can be found in googles documentation here

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location, 
        map: map
    });
}

edited May 23 '17 at 10:29

Community

1
1

answered Jun 21 '16 at 13:58

Matt

4,107
3
29
38

Seems you aren't passing it the map so you need to give it that otherwise it has nowhere to go. – Matt Jun 21 '16 at 14:13
all i want when i click button on my UI the map opened to the specific location according to my object latlng and place a marker – mohamed abdul Jun 21 '16 at 14:46

score 0 · Answer 2 · edited Oct 09 '22 at 21:33

What is not working is not clear, however...

Assuming have map loaded:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
        async></script>
<script>

note async and callback=initMap, put a var map at top to allow easier later use

//add global variable for map
var map;

// Initialize and add the map mon callback when goole.map api loaded
function initMap() {
    // The location of Uluru
    const uluru = { lat: -25.344, lng: 131.036 };
       
    // Create the map and store in global variable
    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 4,
        center: uluru,
    });
}

Then when call the function from the button it using the map varable rather than trying to create a new on

function placeMarker(myLatlng){
    var marker = new google.maps.Marker({
        position: myLatlng,
        title:"Hello World!",
     });
 });

Then your function call code on button click.

$scope.search_item = function (item){
    lat = item.lat;
    lng = item.lng
    latLng = new google.maps.LatLng(lat, lng);
    placeMarker(latLng);
}

adding marker on google map when i click button

2 Answers2