Ajouter des marqueurs à google map sur le bouton cliquer

J'ai le code suivant où j'utilise une carte Google avec des images de superposition. J'ai codé en dur un marqueur sur cette carte. Dans ma page, je dois ajouter des marqueurs sur le bouton "Ajouter un marqueur" pour obtenir les entrées de latitude et de longitude. Comment puis-je pousser des marqueurs sur la carte en cliquant sur ce bouton.Ajouter des marqueurs à google map sur le bouton cliquer

<html> 
<head> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-map/3.0-rc1/jquery.ui.map.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
<style> 
    #map { 
    height: 90%; 
    } 
    html, body { 
    height: 90%; 
    margin: 0; 
    padding: 0; 
    } 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?key= xxx"></script> 
<script> 
    var overlay; 

    MapOverlay.prototype = new google.maps.OverlayView(); 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: {lat: 9.877717, lng: 79.694586}, 
     mapTypeId: 'satellite' 
    }); 

    var myLatLng = {lat: 9.8, lng: 79.9}; 
    //adding a marker 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map 
    }); 

    var bounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(9.71088992, 79.6855391), 
     new google.maps.LatLng(9.9351849, 80.048088)); 

    var srcImage = 'file:///home/../abc.jpg'; 

    overlay = new MapOverlay(bounds, srcImage, map); 
    } 

    function MapOverlay(bounds, image, map) { 

    ........ 
    } 

    MapOverlay.prototype.onAdd = function() { 

    ............. 
    }; 


    google.maps.event.addDomListener(window, 'load', initMap); 
</script> 
</head> 
<body> 
Latitude : <input type="text" placeholder="Latitude" id="lat"/> 
Longitude : <input type="text" placeholder="Longitude" id="lng"/> 
<button type="button" id="addMarkerBtnId">Add Marker</button> 
<br/><br/> 
<div id="map"></div>

Source

2017-08-22 Malintha

Une option consiste à utiliser la fonction google.maps.event.addDomListener:

google.maps.event.addDomListener(document.getElementById('addMarkerBtnId'), 'click', function(evt) { 
    var marker = new google.maps.Marker({ 
    position: { 
    lat: parseFloat(document.getElementById('lat').value), 
    lng: parseFloat(document.getElementById('lng').value)}, 
    map: map 
    }); 
});

proof of concept fiddle

extrait de code:

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    center: { 
 
     lat: 9.877717, 
 
     lng: 79.694586 
 
    }, 
 
    mapTypeId: 'satellite' 
 
    }); 
 

 
    var myLatLng = { 
 
    lat: 9.8, 
 
    lng: 79.9 
 
    }; 
 
    //adding a marker 
 
    var marker = new google.maps.Marker({ 
 
    position: myLatLng, 
 
    map: map 
 
    }); 
 
    google.maps.event.addDomListener(document.getElementById('addMarkerBtnId'), 'click', function(evt) { 
 
    var marker = new google.maps.Marker({ 
 
     position: { 
 
     lat: parseFloat(document.getElementById('lat').value), 
 
     lng: parseFloat(document.getElementById('lng').value) 
 
     }, 
 
     map: map 
 
    }); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
Latitude : 
 
<input type="text" placeholder="Latitude" id="lat" value="9.877" /> Longitude : 
 
<input type="text" placeholder="Longitude" id="lng" value="79.694" /> 
 
<button type="button" id="addMarkerBtnId">Add Marker</button> 
 
<br/> 
 
<br/> 
 
<div id="map"></div>

Source

2017-08-22 10:16:33 geocodezip

Ajouter des marqueurs à google map sur le bouton cliquer

Répondre

Questions connexes