简体   繁体   中英

adding marker on google map when i click button

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

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

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

Assuming have map loaded:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBX0ekQbrOinf8Vf_camYnoJe-acx2GxkQ&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);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM