Google Maps API Tour Plotter
Going on tour, got my map!
HTML
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-pcRY1ddJccibC3RgxzvgTRIRG7Vwjk0&sensor=false&dummy=.js"></script>
<div id="map-controls">
<button id="geolocate" type="button" >Geolocation</button>
<button id="addDummyMarkers" type="button" >Add Dummy Markers</button>
<button id="addTourPoint" type="button" >Add Tour Point</button>
<input type=text id="addTPLat" value="45.510781" />
<input type=text id="addTPLng" value="-122.68145" />
<button id="drawTourPath" type="button">Draw Tour Path</button>
<button id="resetMap" type="button" >Reset Map</button>
</div>
<div id="map-canvas"></div>
<ol id="location-list">
</ol>
CSS
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#location-list {
float:left;
width: 400px;
height: 400px;
font-size: 12px;
}
#map-controls {
width: 150px;
float: left;
}
button { display: block;
float: left;
width:125px;}
input {
width:125px;
}
#map-canvas { height: 500px; width: 500px; float:left; }
JavaScript
$(document).ready(function(){
// -- Map --
// -- -- build Map --
var coords = new google.maps.LatLng('45.09', '-122.77');
var mapOptions = {
zoom: 7,
center: coords,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var markersActive = [];
var tourStopsCoordinates = [];
var tourPaths = [];
var infoBoxes = [];
// -- -- Map functions --
// Marker Data functions
function addToLocationList(geocodeAddress) {
$("#location-list").append('<li></li>');
var result = '';
for (var i = 0; i < geocodeAddress.length; i++) {
result += '<option value="'+ i + '">' +geocodeAddress[i]+ '</option>';
}
$("#location-list > li").last().append('<select>' + result + '</select>');
}
function clearLocationsList() {
$("#location-list li").remove();
}
// -- Click functions --
function addMarker(latitude, longitude) {
var markerCoords = new google.maps.LatLng(latitude, longitude);
// get title from
$.ajax({
type: "GET",
url: "http://maps.googleapis.com/maps/api/geocode/json?latlng="+latitude+","+longitude+"&sensor=true",
dataType: "json",
success: function(data) {
var currentAddress = [];
var i;
for (i = 0; i < data.results.length; i++) {
currentAddress.push(data.results[i]['formatted_address']);
}
var marker = new google.maps.Marker({
position: markerCoords,
map: map,
title: currentAddress[1],
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function() {
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: #fafafa; padding: 5px;...