Skip to content

Instantly share code, notes, and snippets.

@nauris-m

nauris-m/add.js

Created June 11, 2013 09:57
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nauris-m/5755758 to your computer and use it in GitHub Desktop.
Save nauris-m/5755758 to your computer and use it in GitHub Desktop.
Download ZIP
Google Maps: add location (ajax call to php, which logs coordinates in a file), load location (read file and show coordinates on a map)
Raw
add.js
var map = null;
var marker = null;
var infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150, 50)});
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker(
{
position: latlng,
map: map,
draggable: true,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'dragend', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, 'click');
return marker;
}
function callAddWindow(o) {
$.ajax({
url: "process.php",
type: "post",
data: { c1: marker.position.jb, c2: marker.position.kb },
success: function(msg) {
$("#status").show();
},
error:function(msg) {
$("#status").show();
$("#status").text("There Was an Error!");
}
});
}
function init() {
handleSvgFallback();
$("#status").hide();
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(56.962994, 24.137220),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
infowindow.close();
$("#status").hide();
if (marker) {
marker.setMap(null);
marker = null;
}
marker = createMarker(event.latLng, "name", generateContent(event.latLng));
});
function generateContent(coords) {
var html =
'<div style="margin: 20px 0;">' +
'<a class="button-link" href="javascript:callAddWindow(this);">Add Location</a>' +
'<a class="button-link" href="javascript:infowindow.close();">Relocate</a>' +
'<a class="button-link" href="javascript:marker.setMap(null);">Discard</a>' +
'<p id="coords"><b>Location Coordinates:</b><br> ' + coords + '</p>' +
'</div>';
return html;
}
}
function showAddInfo() {
alert("show add info");
}
/* SVG Fallback */
function handleSvgFallback() {
if (!isSvgSupported()) {
var imgs = document.getElementsByTagName('img');
var dotSVG = /.*\.svg$/;
for (var i = 0; i != imgs.length; ++i) {
if (imgs[i].src.match(dotSVG)) {
imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
}
}
}
}
function isSvgSupported() {
return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>mapADD</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"/>
<link rel="stylesheet" href="main.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body onload="init()">
<div class="navigation">
<!--button links-->
<a class="button-link" href="index.html">Add Location</a>
<a class="button-link" href="loader.html">View Locations</a>
<a class="button-link" onclick="showAddInfo();">Information</a>
<!--icon fonts-->
<a href="#" class="icon" data-icon="&#10006"></a>
<a href="#" class="icon" data-icon="&#9733"></a>
<a href="#" class="icon" data-icon="&#128077"></a>
<a href="#" class="icon" data-icon="&#59196"></a>
<!--svg: remember to remove w and h attributes from svg file for more flexibility-->
<img src="close.svg" alt="x" style="width:32px;height:32px;">
&#9776;
</div>
<div id="status">Location Saved Succesfully!</div>
<div id="map_canvas" style="width: 100%; height: 90%; margin-top: 45px;"></div>
<noscript>
<p>JavaScript must be enabled in order for you to use Google Maps</p>
</noscript>
</body>
</html>
Raw
list.js
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function init() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(56.962994, 24.137220),
zoom: 14,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
//load xml data
downloadUrl("test.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
}
function showListInfo() {
alert("list info");
}
Raw
loader.html
<!DOCTYPE html>
<html>
<head>
<title>mapLOADER</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"/>
<link rel="stylesheet" href="main.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="list.js"></script>
</head>
<body onload="init()">
<div class="navigation">
<a class="button-link" href="index.html">Add Location</a>
<a class="button-link" href="loader.html">View Locations</a>
<a class="button-link" onclick="showListInfo();">Information</a>
</div>
<div id="map" style="width: 100%; height: 100%; margin-top: 45px;"></div>
<noscript>
<p>JavaScript must be enabled in order for you to use Google Maps</p>
</noscript>
</body>
</html>
Raw
main.css
html, body {
height: 100%;
margin: 0;
padding: 0;
background: #333;
}
ul li {
list-style: none;
}
.navigation {
background: #333333 url("51.jpg") repeat;
float: left;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1000;
height: 45px;
}
.navigation .button-link:first-child {
margin-left: 5px;
}
.navigation .button-link {
float: left;
}
#status {
position: absolute;
background: #fbb450;
z-index: 1000;
top: 50px;
padding: 10px;
width: 300px;
text-align: center;
left: 50%;
margin-left: -150px;
display: none;
}
#coords {
margin: 10px 0;
color: #777777;
float: left;
}
.button-link {
padding: 5px 5px;
background: #fbb450;
color: #333;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #df8505;
display: block;
margin: 5px 0;
margin-right: 5px;
text-align: center;
cursor: pointer;
text-decoration: none;
}
.button-link:hover {
/* color: #3C3B36;
background: #faa732;
text-decoration: none;
cursor: pointer;*/
}
@font-face {
font-family: 'entypo';
src: url('Entypo/entypo/entypo.eot');
src: url('Entypo/entypo/entypo.eot?#iefix') format('embedded-opentype'),
url('Entypo/entypo/entypo.woff') format('woff'),
url('Entypo/entypo/entypo.ttf') format('truetype'),
url('Entypo/entypo/entypo.svg#entypo') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'entypo-social';
src: url('Entypo/entypo/entypo-social.eot');
src: url('Entypo/entypo/entypo-social.eot?#iefix') format('embedded-opentype'),
url('Entypo/entypo/entypo-social.woff') format('woff'),
url('Entypo/entypo/entypo-social.ttf') format('truetype'),
url('Entypo/entypo/entypo-social.svg#entypo-social') format('svg');
font-weight: normal;
font-style: normal;
}
.icon {
text-decoration: none;
}
.icon:hover {
text-decoration: none;
}
.icon:before {
color: #fbb450;
font-family: 'entypo';
content: attr(data-icon);
font-size: 4em;
float: right;
}
/*media queries*/
@media (max-width: 400px) {
body { background: #c4e3f3; }
}
@media (min-width: 401px) and (max-width: 800px) {
body { background: #953b39; }
}
@media (min-width: 801px) {
body { background: #faf2cc; }
}
Raw
process.php
<?php
$coord1 = $_POST['c1'];
$coord2 = $_POST['c2'];
function logToFile($filename, $msg) {
$fd = fopen($filename, "a");
$str = "[" . date("Y/m/d h:i:s", mktime()) . "] " . $msg;
fwrite($fd, $str . "\n");
fclose($fd);
}
logToFile("saves.txt", $coord1."|".$coord2);
echo "data received";
?>
Raw
test.php
<?php
/*
generates xml with coordinates from file stored coordinates (for AJAX)
todo: implement db based location storing
*/
header("Content-type: text/xml");
echo '<markers>';
$file = fopen("saves.txt", "r");
while (!feof($file)) {
$line = fgets($file);
/* empty line check */
if($line != "") {
echo '<marker ';
$item = substr($line, 22,strlen($line));
$added = substr($line, 1,19);
$p= $item;
$pieces = explode("|", $p);
$rnd = rand(0, 1);
if($rnd == "1") {
$type = "bar";
} else {
$type = "restaurant";
}
echo 'name="Name:'.substr($item,0,10).'" ';
echo 'address="Added:'.$added.'" ';
echo 'lat="'.$pieces[0].'" ';
echo 'lng="'.$pieces[1].'" ';
echo 'type="'.$type.'" ';
echo '/>';
}
}
fclose($file);
echo '</markers>';
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment