Travel planer



<!DOCTYPE html>
<html>
  <head>
    <title>Planera din resa</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&v=3.exp&libraries=places&key=My_key&sensor=false">
    </script>


    <script type="text/javascript">
var map;

function initialize()
{
  var mapOptions =
  {
    zoom: 2,
    center: {lat: 0.0, lng: 0.0}
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    google.maps.event.addListener(map, 'rightclick', function(event) {
        var marker = new google.maps.Marker({
            position: event.latLng, //map Coordinates where user right clicked
            map: map,
            draggable:true, //set marker draggable
            animation: google.maps.Animation.DROP
        });
    });

  //Content structure of info Window for the Markers
        var contentString = $('<div class="marker-info-win">'+
        '<div class="marker-inner-win"><span class="info-content">'+
        '<h1 class="marker-heading">New Marker</h1>'+
        'This is a new marker infoWindow'+
        '</span>'+
        '</div></div>');

        //Create an infoWindow
        var infowindow = new google.maps.InfoWindow();

        //set the content of infoWindow
        infowindow.setContent(contentString);

        //add click event listener to marker which will open infoWindow
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker); // click on marker opens info window
        });
}


google.maps.event.addDomListener(window, 'load', initialize);


    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>