开发者

Button to drop markers on google maps (for a non programmer)

开发者 https://www.devze.com 2023-04-12 07:44 出处:网络
I\'m dabbling a bit with google maps and data presentation and was wondering if it is possible to create a button on the map page to drop the markers.

I'm dabbling a bit with google maps and data presentation and was wondering if it is possible to create a button on the map page to drop the markers.

I have no programming experience (I deal with SQL mainly) so any help appreciated - I have the following code taken from varying webistes:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
  html { height: 100% } 
  body { height: 100%; margin: 0; padding: 0 } 
  #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
</script> 
<script type="text/javascript"> 

    // Standard google maps function 
    function initialize() { 
        var myLatlng = new google.maps.LatLng(52.469397,-3.208008);
        var myOptions = { 
            zoom: 8, 
            center: myLatlng, 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
        } 
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
        TestMarker(); 
    } 

    // Function for adding a marker to the page. 
    function addMarker(location) { 
        marker = new google.maps.Marker({ 
            position: location, 
            map: map,
    animation: google.maps.Animation.DROP  
        }); 
    } 

    // Testing the addMarker function 
    function TestMarker() { 
Marker1=new google.maps.LatLng(52.268000,-3.043000); addMarker(Marker1); 
Marker23=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker23); 
Marker24=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker24); 
Marker25=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker25); 
Marker26=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker26); 
Marker584=new google.maps.LatLng(51.747777,-3.500599); addMarker(Marker584); 
Marker585=new google.maps.LatLng(51.608871,-3.647570); addMarker(Marker585); 

    } 
</script> 
</head> 
<body onload="initialize()"> 


  <div id="map_canvas" style="border: 1px solid black; width: 500px; height: 400px;">map     div</div> 
<p style="margin-top: 5px"> 
  <button id="drop">Drop</button>  
</p> 

</body> 
</html>

Now this creates a but开发者_高级运维ton, but I can't for the life of me work out how to link this back to my markers. I have found something here that I should be able to adapt but I just don't have the knowhow.

My markers are defined by a sql query, but for now I would like to be able to simply feed in a list and get a drop button to drop them when I click on it.

Any help massively appreciated :)


Remove the call to TestMarker from your initialize function. Then just add an onclick attribute to your button:

  <button id="drop" onclick="TestMarker()">Drop</button>  
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号