Android map test

by joe chan

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1jklt1odUzxdSl-76wWLwzX2h7Z3CwP8&callback=initMap" async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var map;
var marker;
var FR;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    center: FR = new google.maps.LatLng(25.0233195,121.4798891),
    zoom: 15
  });
 marker = new google.maps.Marker({
    position: FR,
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
  });
  
  marker.addListener('click', toggleBounce);


  //////////////////////////////////////////////
  var coordInfoWindow = new google.maps.InfoWindow();
  coordInfoWindow.setContent(createInfoWindowContent(FR, map.getZoom()));
  coordInfoWindow.setPosition(FR);
  coordInfoWindow.open(map);

  map.addListener('zoom_changed', function() {
    coordInfoWindow.setContent(createInfoWindowContent(FR, map.getZoom()));
    coordInfoWindow.open(map);
  });
}

var TILE_SIZE = 256;

function createInfoWindowContent(latLng, zoom) {
  var scale = 1 << zoom;
var link = "<a href='http://ppt.cc/7ycto'>FB粉絲專頁</a>"
  return [
    '最愛餐廳---三號鐵板燒',
    link,
    '經緯度:' + latLng,
    '縮放等級: ' + zoom
  ].join('<br>');
}

// The mapping between latitude, longitude and pixels is defined by the web
// mercator projection.
function project(latLng) {
  var siny = Math.sin(latLng.lat() * Math.PI / 180);

  // Truncating to 0.9999 effectively limits latitude to 89.189. This is
  // about a third of a tile past the edge of the world tile.
  siny = Math.min(Math.max(siny, -0.9999), 0.9999);

  return new google.maps.Point(
    TILE_SIZE * (0.5 + latLng.lng() / 360),
    TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI)));
}
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } 
  else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}