Skip to content

Instantly share code, notes, and snippets.

@lamprosg

lamprosg/map.html

Created January 2, 2013 15:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lamprosg/4435380 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lamprosg/4435380 to your computer and use it in GitHub Desktop.
Download ZIP
Google Maps API
Raw
map.html
<script src="map_code.js"></script> <!-- My map code -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&key=YOURKEY"></script> <!-- Map API -->
<!-- No GPS sensor -->
<body onLoad="initialize()">
div id="map_canvas"></div>
</body>
Raw
map_code.js
/** Global variables *******************************************/
//HTML5 geolocation Id
var watchId;
//The map
var map;
//Coordinates
var mylat;
var mylng;
var username = new Array(); //Array objects
var lat = new Array();
var lng = new Array();
//Position object
var mypos;
var positions = new Array(); //All positions
//Markers
var myMarker;
var marker = new Array();
//Number of users
var users;
/** Global variables end ***************************************/
function initialize()
{
if(navigator.geolocation)
{
var settings = { //Basic settings of the map
zoom: 1,
center: new google.maps.LatLng(19.973349,9.492188),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP // ROADMAP, SATELLITE, HYBRID or TERRAIN
};
//variable map defines that the map should use the settings we just created
map = new google.maps.Map(document.getElementById("map_canvas"), settings);
map.setTilt(45);
//Start tracking my location
var options = {enableHighAccuracy: true};
watchId = navigator.geolocation.watchPosition(showLocations, errorHandler, options);
//navigator.geolocation.getCurrentPosition(showLocations, errorHandler);
//setInterval( function(){startUpdatingLocations();}, 250); // If we use getCurrentPosition instead of watchPosition.
}
else
{
alert("Sorry, you do not have geolocation support!");
window.location = "index.php"
}
}
function showLocations(position) //Callback
{
mylat = position.coords.latitude;
mylng = position.coords.longitude;
//var myspeed = position.coords.myspeed; // (m/s)
//myspeed *=0.06; // (km/h)
mypos = new google.maps.LatLng(mylat, mylng); //My position object
//Update my location in the database with AJAX*********************************************
$.ajax({ //Send using AJAX
type: "GET",
url: "updateDatabase.php",
data: "mylat="+mylat+"&mylng="+mylng,
success: function(){
},
error: function(){
}
});
//Update ends******************************************************************************
//Get all locations based on the group phrase
$.ajax({ //Send using AJAX
type: "GET",
url: "getMarkers.php",
success: function(data, textStatus, jqXHR){
var output = jqXHR.responseText.split(","); //jqXHR is the XMLHttpRequest object. Split it in an array between commas
//See getMarkers.php
users = output[0]; //Number of users online
var offset=1; //We need an offset to move every 3 elements in the array, starting from output[1]
for (var j=0;j<users;j++)
{
username[j] = output[offset];
lat[j] = output[offset+1];
lng[j] = output[offset+2];
offset+=3;
}
//Create position objects and render them on the map
var markerBounds = new google.maps.LatLngBounds(); //new markerbounds object
for (var counter=0 ; counter<users ; counter++)
{
if ( lat[counter]!=0 && lng[counter]!=0 ) //If he is logged in
{
//If marker exists, delete it so we can create a new one
//Maybe it's a different user with another username caused by a log-out
if (typeof(marker[counter]) != "undefined")
map.removeOverlay(marker[counter]);
positions[counter] = new google.maps.LatLng(lat[counter], lng[counter]); //Create the position object
markerBounds.extend(positions[counter]); //Add position to markerbounds, so we can fit all markers in the screen
//Create the marker, based on position. We use markerwithlabel.js instead of the default one
//The default would be: marker = new google.maps.Marker
marker[counter] = new MarkerWithLabel({
position: positions[counter],
map: map,
icon: "images/twitter_pin_icon.png",
labelContent: username[counter],
labelAnchor: new google.maps.Point(48, 0),
labelClass: "labels", // the CSS class for the label
title: username[counter]
});
/*
infopopup = '<div class="info_popup">';
infopopup+='<img src="images/blue_twitter_bird.png" width="15" height="12" border=0>';
infopopup+= username[counter];
infopopup+='(twitter.com/';
infopopup+=username[counter];
infopopup+=')';
infopopup+='<br><br>Coordinates:<br>Latitude: ';
infopopup+=lat[counter];
infopopup+='<br>Longtitude: ';
infopopup+=lng[counter];
infopopup+='</div>';
infowindow = new google.maps.InfoWindow({
content: infopopup
})
//To make the infobox appear when clicked
google.maps.event.addListener(marker[counter], 'click', function() {
infowindow.open(map, marker[counter]);
});
*/
}
else //if lat,lng is 0, delete the marker if it's active
{
if (typeof(marker[counter]) != "undefined")
map.removeOverlay(marker[counter]);
}
}
map.fitBounds(markerBounds); //Fit markers to screen
//Success ended
},
error: function(){
}
});
}
function errorHandler(err)
{
if (err.code == 1)
{
alert("Access is denied");
}
else if (err.code == 2)
{
alert("The location of the device could not be determined");
}
else if (err.code == 3)
{
alert("Unable to retrieve the location information within the specified maximum timeout interval");
}
else // err.code=0
{
alert("Unknown error");
}
}
//My location update ends
function showMyLocation()
{
map.setCenter(mypos);
map.setZoom(16);
}
function fitAllMarkers()
{
var markerBounds = new google.maps.LatLngBounds();
var p = new Array();
for (var c=0;c<users;c++)
{
if ( lat[c]!=0 && lng[c]!=0 ) //If he is logged in
{
p[c] = new google.maps.LatLng(lat[c], lng[c]);
markerBounds.extend(p[c]);
}
}
map.fitBounds(markerBounds);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment