Planit.js

Add Marker on Click Example

This demonstrates how you can add a marker to the map. In this particular example, we're adding a marker as a reaction to a click event on a button.

Add Marker!

<head>

<link rel="stylesheet" href="https://raw.githubusercontent.com/planitjs/planit/master/dist/planit.min.css">

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://raw.githubusercontent.com/planitjs/planit/master/dist/planit.min.js"></script>

<body>

<div id="planit"></div>
<div style="text-align: center;">
  <a href="#" id="add-marker" class="button" 
     style="margin:-25px 0 0 0; display:block;">Add Marker!</a>
</div>

<script>

p = planit.new();

$('#add-marker').click(function(e){
  e.preventDefault();
  randomX = Math.random() * 100;
  randomY = Math.random() * 100;
  p.addMarker({
    coords: [randomX, randomY],
    color: '#12abe3'
  })
});