Skip to content

Instantly share code, notes, and snippets.

@ryuone

ryuone/google_map_sample.html

Created August 30, 2013 07:07
Show Gist options
  • Save ryuone/6387035 to your computer and use it in GitHub Desktop.
Save ryuone/6387035 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
google_map_sample.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 90% }
#event-details{
width:160px;
text-align:center;
background-color:#eee;
border: 1px solid #000000;
margin-top: 20px;
-moz-opacity:0.7;
opacity:0.7;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyD2BC-enIBhegTIaBfRoKK-a8Prar_cXac&sensor=true&libraries=geometry"></script>
<script>
var map;
var stepDisplay;
var latlng1 = new google.maps.LatLng(35.6907553, 139.743993);
var latlng2 = new google.maps.LatLng(35.6887040, 139.743999);
var latlng3 = new google.maps.LatLng(35.6896040, 139.738999);
function initialize() {
var mapOptions = {
zoom: 16,
center: latlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker1 = new google.maps.Marker({
//icon: "/static/Map_pin1.png",
icon: "http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=flag|00FF00",
animation: google.maps.Animation.DROP,
draggable: false,
raiseOnDrag: true,
flat: true,
position: latlng1,
map: map,
title: 'Goal'
});
var marker2 = new google.maps.Marker({
icon: "http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.5|0|FF0000|13|_|",
animation: google.maps.Animation.DROP,
draggable: true,
raiseOnDrag: true,
flat: true,
position: latlng2,
map: map,
title: 'UserA'
});
var marker3 = new google.maps.Marker({
icon: "http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.5|0|FFFF00|13|_|",
animation: google.maps.Animation.DROP,
draggable: true,
raiseOnDrag: true,
flat: true,
position: latlng3,
map: map,
title: 'UserB'
});
var rendererOptions = {
map: map,
suppressInfoWindows: true,
suppressMarkers : true
}
var directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions);
stepDisplay = new google.maps.InfoWindow();
google.maps.event.addListener(marker1, 'click', (function(){
return toggleBounce(marker1)
}));
google.maps.event.addListener(marker2, 'click', (function(){
return toggleBounce(marker2)
}));
google.maps.event.addListener(marker2, 'dragend', (function(event){
showDirections(directionsRenderer, marker1, marker2, event.latLng)
}));
google.maps.event.addListener(map, 'click', (function(event){
showDirections(directionsRenderer, marker1, marker2, event.latLng)
}));
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
//var infowindow = new google.maps.InfoWindow({
// map: map,
// position: pos,
// content: 'Location found using HTML5.'
// });
map.setCenter(pos);
marker1.setPosition(pos);
showDirections(directionsRenderer, marker1, marker2, latlng2)
}, function() {
handleNoGeolocation(true);
});
} else {
handleNoGeolocation(false);
}
var homeControlDiv = document.createElement('div');
var homeControl = new GoalControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(homeControlDiv);
showDetails();
}
function showDetails(){
eventDetails = $("#event-details").get(0);
eventDetails.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(eventDetails);
console.log(eventDetails);
}
function showDirections(directionsRenderer, marker1, marker2, latLng){
marker2.setPosition(latLng);
var from = marker2.getPosition();
var to = marker1.getPosition();
var request = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.WALKING
}
var distance = google.maps.geometry.spherical.computeDistanceBetween(from, to);
console.log(distance.toFixed(2) + "m");
$("#rest-distance").text(distance.toFixed(2))
if(distance < 500){
directionsRenderer.setMap(map);
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(directionsResult, directionsStatus){
if (directionsStatus === google.maps.DirectionsStatus.OK) {
console.log(directionsResult);
//showSteps(directionsResult);
directionsRenderer.setDirections(directionsResult);
}
})
}else{
directionsRenderer.setMap(null);
}
}
var markerArray = [];
function showSteps(directionResult) {
for (i = 0; i < markerArray.length; i++) {
markerArray[i].setMap(null);
}
markerArray = []
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
var icon = "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=" + i + "|FF0000|000000";
if (i == 0) {
icon = "https://chart.googleapis.com/chart?chst=d_map_xpin_icon&chld=pin_star|car-dealer|00FFFF|FF0000";
}
var marker = new google.maps.Marker({
position: myRoute.steps[i].start_point,
map: map,
icon: icon
});
attachInstructionText(marker, myRoute.steps[i].instructions);
markerArray.push(marker);
}
var marker = new google.maps.Marker({
position: myRoute.steps[i - 1].end_point,
map: map,
icon: "https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=flag|ADDE63"
});
markerArray.push(marker);
google.maps.event.trigger(markerArray[0], "click");
}
function attachInstructionText(marker, text) {
google.maps.event.addListener(marker, 'click', function() {
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}
function toggleBounce(marker) {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
function GoalControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Goal';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Goal</b>';
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(latlng1)
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>Menu</div>
<div id="event-details">
<div>
<span>Time</span>
<span id='rest-time'></span>
</div>
<div>
<div>Distance</div>
<div>
<span id='rest-distance'></span>
<span>m</span>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment