Ejemplos Google Maps v3

Size: px
Start display at page:

Download "Ejemplos Google Maps v3"

Transcription

1 Ejemplos Google Maps v3 Ejemplo1 :Visor GMAP básico Ejemplo2.Visor GMAP + WMS 4326 Ejemplo3.Visor GMAP + GeoNames Ejemplo4: Visor GMAP + Geocoding Ejemple5: Visor GMAP + FusionTables Ejemplo6:Visor GMAP + Tráfico+ KML Dades Obertes Ejemplo7:Visor GMAP + Routing Ejemplo8:Visor GMAP + Puntos Paso 1 Ejemplo1 : Visor GMAP básico Crear un documento HTML llamado GMAP_basico.html <title>gmapv3 Basico</title> <body> Paso 2 Añadir la referencia a la API de Google Maps <title>gmapv3 Basico</title> <body> Paso 3 Crear el tag <DIV> dónde se escribirá el mapa y su estilo CSS <title>gmapv3 Basico</title> #mapa { width: 512px; height: 600px; border: 1px solid #eee;

2 <body> Paso 4 Crear una función en JavaScript llamada init() que cree un objeto Map de Google Maps. LLamar a init() cuando se cargue el <body> de la página Más información ( <title>gmapv3 Basico</title> #mapa { width: 512px; height: 600px; border: 1px solid #eee; <script type="text/javascript"> function init() { var mylatlng = new google.maps.latlng(39.716, 2.911); var myoptions = { zoom: 12, pancontrol: true, zoomcontrol: true, maptypecontrol: true, scalecontrol: true, streetviewcontrol: false, center: mylatlng, maptypeid: google.maps.maptypeid.roadmap var map = new google.maps.map(document.getelementbyid("mapa"), myoptions);

3 Ejemplo2.Visor GMAP + WMS 4326 Todo Crear un documento HTML llamado GMAP_WMS.html <title>google Maps + WMS</title> html,body{ height: 100%; margin: 0; #mapa{ height: 100%; margin: 0; <script> function init(){ var mylatlng = new google.maps.latlng( , ); var myoptions = { zoom: 12, center: mylatlng, maptypeid: google.maps.maptypeid.terrain ; map = new google.maps.map(document.getelementbyid("mapa"), myoptions); var wmsoptions = { alt: "WMS INE", gettileurl: WMSGetTileUrl, ispng: false, maxzoom: 20, minzoom: 0, name: "WMS INE", opacity: 0.5, tilesize: new google.maps.size(256, 256) ; var wmsmaptype = new google.maps.imagemaptype(wmsoptions); map.overlaymaptypes.insertat(0, wmsmaptype); function WMSGetTileUrl(tile, zoom) { var projection = window.map.getprojection(); var zpow = Math.pow(2,zoom); var ul = new google.maps.point(tile.x*256.0/zpow, (tile.y+1)*256.0/zpow); var lr = new google.maps.point((tile.x+1)*256.0/zpow, (tile.y)*256.0/zpow); var ulw = projection.frompointtolatlng(ul); var lrw = projection.frompointtolatlng(lr);

4 var baseurl = " var format = "image/png"; var layers = "municipios,ine"; var styles = ""; var srs = "EPSG:4326"; var bbox = ulw.lng() + "," + ulw.lat() + "," + lrw.lng() + "," + lrw.lat(); var url = baseurl + "version=1.1.1&request=getmap&layers=" + layers + "&Styles=" + styles + "&SRS="+ srs +"&BBOX=" + bbox + "&width=" + this.tilesize.width +"&height=" + this.tilesize.height + "&format=" + format + "&transparent=true"; return url;

5 Todo Ejemplo3.Visor GMAP + GeoNames Crear un documento HTML llamado GMAP_Geonames.html <script type="text/javascript" src=" <title>google Maps geonames</title> #mapa { position:absolute; top:50px; left:250px; width: 700px; height:700px #resultdiv { position:absolute; top:50px; width:249px; height:700px; background-color:#ccffff <script type="text/javascript"> var map; function init(){ var mylatlng = new google.maps.latlng(41.648, 1.752); var myoptions = { zoom: 9, center: mylatlng, maptypeid: google.maps.maptypeid.hybrid ; map = new google.maps.map(document.getelementbyid("mapa"), myoptions); function getlocation(jdata) { if (jdata == null) { return; var html = ''; var geonames = jdata.geonames; for (i=0;i< geonames.length;i++) { var name = geonames[i]; html = html + '<a href="javascript:center(' + name.lat +',' + name.lng + ');">'+ name.name + '('+name.fclname+','+name.countryname+')</a><br>';

6 document.getelementbyid('resultdiv').innerhtml = html; function center(lat,lng){ var point = new google.maps.latlng(lat,lng); map.setcenter(point); map.setzoom(11); function search() { request = ' + encodeuricomponent(document.getelementbyid('q').value) + '&maxrows=10&callback=getlocation'; aobj = new JSONscriptRequest(request); aobj.buildscripttag(); aobj.addscripttag(); <form id="searchform" onsubmit="search(); return false;" > <input id="q" type="text" name="q"> </form> <div id="resultdiv"></div> Añadimos un Marker + InfoWindow <script type="text/javascript" src=" <title>google Maps geonames</title> #mapa { position:absolute; top:50px; left:250px; width: 700px; height:700px #resultdiv { position:absolute; top:50px; width:249px; height:700px; background-color:#ccffff

7 <script type="text/javascript"> var map; function init(){ var mylatlng = new google.maps.latlng(41.648, 1.752); var myoptions = { zoom: 9, center: mylatlng, maptypeid: google.maps.maptypeid.hybrid ; map = new google.maps.map(document.getelementbyid("mapa"), myoptions); function getlocation(jdata) { if (jdata == null) { return; var html = ''; var geonames = jdata.geonames; for (i=0;i< geonames.length;i++) { var name = geonames[i]; html = html + '<a href="javascript:center(' + name.lat +',' + name.lng + ');">'+ name.name + '('+name.fclname+','+name.countryname+')</a><br>'; document.getelementbyid('resultdiv').innerhtml = html; var marker; function center(lat,lng){ var point = new google.maps.latlng(lat,lng); map.setcenter(point); map.setzoom(11); if (marker) {marker.setmap(null); marker = new google.maps.marker({ map: map, position:point ); var infowindow = new google.maps.infowindow( { content: lat+","+lng, size: new google.maps.size(50,50) ); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map,marker); ); function search() { request = ' + encodeuricomponent(document.getelementbyid('q').value) + '&maxrows=10&callback=getlocation';

8 aobj = new JSONscriptRequest(request); aobj.buildscripttag(); aobj.addscripttag(); <form id="searchform" onsubmit="search(); return false;" > <input id="q" type="text" name="q"> </form> <div id="resultdiv"></div> Cómo haríamos para que en el infowindow apareciera en nombre del lugar?

9 Todo Ejemplo4: Visor GMAP + Geocoding Crear un documento HTML llamado GMAP_basico.html <title>google Maps + geocoding</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.6, user-scalable=no"> #mapa{ width:100%; height:90% ; margin:0!important; padding:0!important; <script type="text/javascript"> var geocoder; var map; function init() { geocoder = new google.maps.geocoder(); var latlng = new google.maps.latlng(41.648, 1.752); var myoptions = { zoom: 9, center: latlng, maptypeid: google.maps.maptypeid.roadmap map = new google.maps.map(document.getelementbyid("mapa"), myoptions); var marker; function showaddress(address) { geocoder.geocode( { 'address': address, function(results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location);

10 map.setzoom(15); if (marker) {marker.setmap(null); marker = new google.maps.marker({ map: map, position: results[0].geometry.location ); else { alert("error: " + status); ); <form action="#" onsubmit="showaddress(this.address.value); return false"> <input type="text" size="30" name="address" value="badajoz, 110,Barcelona" /> </form> Como añadiríamos un infowindow que enseñara el nombre de la calle?

11 Todo Ejemple5: Visor GMAP + FusionTables Crear un documento HTML llamado GMAP_FusionTables.html <title>google Maps + FusionTables</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.6, user-scalable=no"> #mapa{ width:100%; height:90% ; margin:0!important; padding:0!important; <script type="text/javascript"> var map;layer function init() { map = new google.maps.map(document.getelementbyid('mapa'), { center:new google.maps.latlng(42, 3), zoom: 5, maptypeid: google.maps.maptypeid.terrain ); // layer = new google.maps.fusiontableslayer({ query: { select: 'Localidad', from: ' ', ); layer.setmap(map);

12 Ejemplo6:Visor GMAP + Tráfico+ KML Dades Obertes Todo Crear un documento HTML llamado GMAP_Trafico.html <title>google Maps + Trafico+KML</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.6, user-scalable=no"> #mapa{ width:100%; height:90% ; margin:0!important; padding:0!important; <script type="text/javascript"> var map; function init() { map = new google.maps.map(document.getelementbyid('mapa'), { center:new google.maps.latlng(42, 3), zoom: 8, maptypeid: google.maps.maptypeid.roadmap ); var trafficlayer = new google.maps.trafficlayer(); trafficlayer.setmap(map); var ctalayer = new google.maps.kmllayer(' ctalayer.setmap(map);

13 Ejemplo7:Visor GMAP + Routing Todo Crear un documento HTML llamado GMAP_Routing.html <script type="text/javascript" src=" <title>google Maps routing</title> #mapa { position:absolute; top:50px; left:250px; width: 700px; height:700px #resultdiv { position:absolute; top:50px; width:249px; height:700px; background-color:#ccffff <script type="text/javascript"> var directionsdisplay; var directionsservice = new google.maps.directionsservice(); var map; function init() { directionsdisplay = new google.maps.directionsrenderer(); var europa = new google.maps.latlng(41,3); var myoptions = { zoom:7, maptypeid: google.maps.maptypeid.roadmap, center: europa map = new google.maps.map(document.getelementbyid("mapa"), myoptions); directionsdisplay.setmap(map); directionsdisplay.setpanel(document.getelementbyid("resultdiv")); function calcroute() { var start = document.getelementbyid("start").value; var end = document.getelementbyid("end").value; var request = { origin:start, destination:end, travelmode: google.maps.travelmode.driving ; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) {

14 ); directionsdisplay.setdirections(response); <strong>de: </strong> <select id="start" > <option value="barcelona,es">selecciona ciudad</option> <option value="barcelona,es">barcelona</option> <option value="madrid,es">madrid</option> <option value="sevilla,es">sevilla</option> </select> <strong>hasta: </strong> <select id="end" onchange="calcroute();"> <option value="barcelona,es">selecciona ciudad</option> <option value="bilbao,es">bilbao</option> <option value="madrid,es">madrid</option> <option value="sevilla,es">sevilla</option> </select> <div id="resultdiv"></div> Ejemplo8:Visor GMAP + Puntos

15 Crear un documento HTML llamado GMAP_puntos.html <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>google maps+ puntos </title> <script type="text/javascript"> var lon = ; var lat = ; var zoom = 9; var map, marker ; var mispuntos = { "sitios": [ { "nombre": "Punto1", "icona": " "texto": "<b>barcelona</b><br><iframe width=\"560\" height=\"315\" "+ "src=\" frameborder=\"0\" allowfullscreen></iframe>", "lon": , "lat": ,, { "nombre": "Punto2", "icona": " "texto": "<img width=\"100\" src=\" "<br><a href=\" target=\"_blank\">wikipedia barcelona</a>", "lon": , "lat": ,,,, { "nombre": "Punto3", "icona": " "texto": "<b> punto 3</b>", "lon": , "lat": , { "nombre": "Punto4", "icona": " "texto": "<b> punto 4</b>", "lon": , "lat": ,

16 ] ; function init(){ var mylatlng = new google.maps.latlng(lat, lon); var myoptions = { zoom: zoom, center: mylatlng, maptypeid: google.maps.maptypeid.hybrid ; map = new google.maps.map(document.getelementbyid("mapa"), myoptions); var matrizpuntos = mispuntos.sitios; for (i=0;i< matrizpuntos.length;i++) { crearpuntos(matrizpuntos[i].lon, matrizpuntos[i].lat, matrizpuntos[i].texto, matrizpuntos[i].icona); function crearpuntos(lon, lat, texto,icona){ var point = new google.maps.latlng(lat,lon); marker = new google.maps.marker({ map: map, icon:icona, position:point ); var infowindow = new google.maps.infowindow( { content: texto, size: new google.maps.size(50,50) ); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map,marker); ); html, body {margin: 0; padding: 0; height: 100%; overflow:hidden; form{ margin: 0; padding: 0; #mapa { width: 100%; height:100%;

17

Google Maps Samples. Google Maps Samples 2012

Google Maps Samples. Google Maps Samples 2012 Google Maps Samples Contents Introduction... 2 Map-simple... 2 Add map holder... 2 Add map library... 3 Add Cascading Style Sheets... 4 Initialize map... 6 Test... 8 Direction-Simple... 8 Create UI...

More information

1061SMAP12 TLMXM1A (8648) (M2143) (Fall 2017) (MIS MBA) (2 Credits, Elective) [Full English Course] Fri 8,9 (15:10-17:00) B206

1061SMAP12 TLMXM1A (8648) (M2143) (Fall 2017) (MIS MBA) (2 Credits, Elective) [Full English Course] Fri 8,9 (15:10-17:00) B206 Tamkang University Social Media Apps Programming Google Map API 1061SMAP12 TLMXM1A (8648) (M2143) (Fall 2017) (MIS MBA) (2 Credits, Elective) [Full English Course] Fri 8,9 (15:10-17:00) B206 Min-Yuh Day,

More information

HTML5 and CSS3 JavaScript Advanced Features Page 1

HTML5 and CSS3 JavaScript Advanced Features Page 1 HTML5 and CSS3 JavaScript Advanced Features Page 1 1 HTML5 and CSS3 JAVASCRIPT ADVANCED FEATURES 2 3 4 5 6 Geolocation The HTML5 Geolocation API is used to get the geographical position of a user Most

More information

Building and packaging mobile apps in Dreamweaver CC

Building and packaging mobile apps in Dreamweaver CC Building and packaging mobile apps in Dreamweaver CC Requirements Prerequisite knowledge Previous experience with Dreamweaver, jquery Mobile, and PhoneGap will help you make the most of this tutorial.

More information

Online Map Application Development Using Google Maps API, SQL Database, and ASP.NET

Online Map Application Development Using Google Maps API, SQL Database, and ASP.NET Online Map Application Development Using Google Maps API, SQL Database, and ASP.NET 1 Shunfu Hu, 2 Ting Dai 1 Department of Geography, Southern Illinois University Edwardsville, Edwardsville, IL 62026,

More information

SEEM4570 System Design and Implementation. Lecture 3 Cordova and jquery

SEEM4570 System Design and Implementation. Lecture 3 Cordova and jquery SEEM4570 System Design and Implementation Lecture 3 Cordova and jquery Prepare a Cordova Project Assume you have installed all components successfully and initialized a project. E.g. follow Lecture Note

More information

Lab 1: Introducing HTML5 and CSS3

Lab 1: Introducing HTML5 and CSS3 CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.

More information

Stamp Builder. Documentation. v1.0.0

Stamp  Builder. Documentation.   v1.0.0 Stamp Email Builder Documentation http://getemailbuilder.com v1.0.0 THANK YOU FOR PURCHASING OUR EMAIL EDITOR! This documentation covers all main features of the STAMP Self-hosted email editor. If you

More information

SEEM4570 System Design and Implementation. Lecture 3 Events

SEEM4570 System Design and Implementation. Lecture 3 Events SEEM4570 System Design and Implementation Lecture 3 Events Preparation Install all necessary software and packages. Follow Tutorial Note 2. Initialize a new project. Follow Lecture Note 2 Page 2. Reset

More information

src1-malan/ajax/ajax1.html ajax1.html Gets stock quote from quote1.php via Ajax, displaying result with alert().

src1-malan/ajax/ajax1.html ajax1.html Gets stock quote from quote1.php via Ajax, displaying result with alert(). src1-malan/ajax/ajaxhtml 1 1 1 1 1 2 2 2 2 2 2 2 2 30. 3 3 3 3 3 3 3 3 3 40. 4 4 4 4 4 4 4 4 ajaxhtml Gets stock quote from quotephp via Ajax, displaying result with alert(). Building Mobile Applications

More information

iphone Web Development iphone and ipod touch Development Fall 2009 Lecture 28

iphone Web Development iphone and ipod touch Development Fall 2009 Lecture 28 iphone Web Development iphone and ipod touch Development Fall 2009 Lecture 28 Questions? Announcements Reminder final project dates of interest... Monday, December 14 th Project source code must be submitted

More information

Positioning in CSS: There are 5 different ways we can set our position:

Positioning in CSS: There are 5 different ways we can set our position: Positioning in CSS: So you know now how to change the color and style of the elements on your webpage but how do we get them exactly where we want them to be placed? There are 5 different ways we can set

More information

Adaptive Mobile Web Pages Using HTML5 and CSS for Engineering Faculty

Adaptive Mobile Web Pages Using HTML5 and CSS for Engineering Faculty ASEE-NMWSC2013-0057 Adaptive Mobile Web Pages Using HTML5 and CSS for Engineering Faculty Wen-Chen Hu Department of Computer Science University of North Dakota Grand Forks, ND 58202-9015 wenchen@cs.und.edu

More information

Lecture 9 (more or less) Web Programming

Lecture 9 (more or less) Web Programming Lecture 9 (more or less) Web Programming DOM: Document Object Model browser presents an object interface accessible from and modifiable by Javascript DOM entities have methods, properties, events element

More information

HTML HTML5. DOM(Document Object Model) CSS CSS

HTML HTML5. DOM(Document Object Model) CSS CSS HTML HTML5 DOM(Document Object Model) CSS CSS HTML html img jpg png gif jpg png gif

More information

Here are a few easy steps to create a simple timeline. Open up your favorite text or HTML editor and start creating an HTML file.

Here are a few easy steps to create a simple timeline. Open up your favorite text or HTML editor and start creating an HTML file. 1 of 6 02-Sep-2013 1:52 PM Getting Started with Timeline From SIMILE Widgets Contents 1 Getting Started 1.1 Note 1.2 Examples 1.3 Step 1. Link to the API 1.4 Step 2. Create a DIV Element 1.5 Step 3. Call

More information

Introduction to Computer Science Web Development

Introduction to Computer Science Web Development Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 14 Lecture outline Discuss HW Intro to Responsive Design Media Queries Responsive Layout

More information

TAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a

TAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a > > > > CSS Box Model Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. You don't have to use a, you can apply the box model to any

More information

Simple Carpool Application using SAP NetWeaver Portal, KM, XML Forms, and Google Maps

Simple Carpool Application using SAP NetWeaver Portal, KM, XML Forms, and Google Maps Simple Carpool Application using SAP NetWeaver Portal, KM, XML Forms, and Google Maps Applies to: SAP NetWeaver Portal 6.x\7.x, Knowledge Management (KM), and Google Maps. For more information, visit the

More information

Implementing a chat button on TECHNICAL PAPER

Implementing a chat button on TECHNICAL PAPER Implementing a chat button on TECHNICAL PAPER Contents 1 Adding a Live Guide chat button to your Facebook page... 3 1.1 Make the chat button code accessible from your web server... 3 1.2 Create a Facebook

More information

Introduction to Programming the Google Maps API

Introduction to Programming the Google Maps API Introduction to Programming the Google Maps API E-Learning for the GIS Professional Any Time, Any Place! geospatialtraining.com Course Modules Module 1: Introduction to Programming the Google Maps API

More information

TLN Hover Menu Up to 3 or More Levels

TLN Hover Menu Up to 3 or More Levels TLN Hover Menu Up to 3 or More Levels Applies to: This article applied to EP 7.0 EHP1 SP6. Summary We already have documents/codes for implementation of 2 level hover menu in TLN. This document provides

More information

Building Python web app on GAE

Building Python web app on GAE Building Python web app on GAE tw3gsucks, a 3G network speed test web app. PyHUG Tsai, Shih-Chang 2011/12/21 It all starts with... 3G network is really SUCKS!!! I'm used to live in a connected world! Bad

More information

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever

More information

Wireframe :: tistory wireframe tistory.

Wireframe :: tistory wireframe tistory. Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17

More information

NAVIGATION INSTRUCTIONS

NAVIGATION INSTRUCTIONS CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU

More information

Scriptaculous Stuart Halloway

Scriptaculous Stuart Halloway Scriptaculous Stuart Halloway stu@thinkrelevance.com Copyright 2007, Relevance, Inc. Licensed only for use in conjunction with Relevance-provided training For permission to use, send email to contact@thinkrelevance.com

More information

Configuring Hotspots

Configuring Hotspots CHAPTER 12 Hotspots on the Cisco NAC Guest Server are used to allow administrators to create their own portal pages and host them on the Cisco NAC Guest Server. Hotspots created by administrators can be

More information

Mobile Web Applications. Gary Dubuque IT Research Architect Department of Revenue

Mobile Web Applications. Gary Dubuque IT Research Architect Department of Revenue Mobile Web Applications Gary Dubuque IT Research Architect Department of Revenue Summary Times are approximate 10:15am 10:25am 10:35am 10:45am Evolution of Web Applications How they got replaced by native

More information

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information

More information

Using an ArcGIS Server.Net version 10

Using an ArcGIS Server.Net version 10 Using an ArcGIS Server.Net version 10 Created by Vince DiNoto Vince.dinoto@kctcs.edu Contents Concept... 2 Prerequisites... 2 Data... 2 Process... 3 Creating a Service... 3 Down Loading Shapefiles... 3

More information

To place an element at a specific position on a page use:

To place an element at a specific position on a page use: 1 2 To place an element at a specific position on a page use: position: type; top: value; right: value; bottom: value; left: value; Where type can be: absolute, relative, fixed (also static [default] and

More information

Week 8 Google Maps. This week you ll learn how to embed a Google Map into a web page and add custom markers with custom labels.

Week 8 Google Maps. This week you ll learn how to embed a Google Map into a web page and add custom markers with custom labels. Introduction Hopefully by now you ll have seen the possibilities that jquery provides for rich content on web sites in the form of interaction and media playback. This week we ll be extending this into

More information

Hoster: openload.co - Free PLUGIN_DEFECT-Error: 08d a1830b60ab13ddec9a2ff6

Hoster: openload.co - Free PLUGIN_DEFECT-Error: 08d a1830b60ab13ddec9a2ff6 JDownloader - Bug #80273 Bug # 75914 (Closed): Hoster: openload.co - Free Hoster: openload.co - Free PLUGIN_DEFECT-Error: 08d9453425a1830b60ab13ddec9a2ff6 08/18/2016 02:13 AM - StatServ Status: Closed

More information

12/9/2012. CSS Layout

12/9/2012. CSS Layout Dynamic HTML CSS Layout CSS Layout This lecture aims to teach you the following subjects: CSS Grouping and nesting Selectors. CSS Dimension. CSS Display.. CSS Floating. CSS Align. 1 CSS Grouping and nesting

More information

Purpose of this doc. Most minimal. Start building your own portfolio page!

Purpose of this doc. Most minimal. Start building your own portfolio page! Purpose of this doc There are abundant online web editing tools, such as wordpress, squarespace, etc. This document is not meant to be a web editing tutorial. This simply just shows some minimal knowledge

More information

CREATIVE & TECHNICAL SPECIFICATIONS

CREATIVE & TECHNICAL SPECIFICATIONS CREATIVE & TECHNICAL SPECIFICATIONS CREATIVE SPECIFICATIONS EXPECTED ASSETS LANDSCAPE: 96Ox424px ipad: 768x928px 1O24x672px SAME SIZE FOR INTERSCROLLER SMARTFOOTER MPU INCONTENT INTERSTITIAL 64Ox2OOpx

More information

Technoparkstrasse Zürich. Tel.: 044 / Fax.: 044 / GeoShop Mapping API. Abstract

Technoparkstrasse Zürich. Tel.: 044 / Fax.: 044 / GeoShop Mapping API. Abstract Technoparkstrasse 1 8005 Zürich Tel.: 044 / 350 10 10 Fax.: 044 / 350 10 19 GeoShop Mapping API Abstract This documentation describes the GeoShop Mapping API version 2.0 (GSAPI). 03.05.2018 Reproduction

More information

GPS Device API Guide Program

GPS Device API Guide Program http://www.egovframe.go.kr/wiki/doku.php?id=egovframework:hyb3.5:guide:ios:gps GPS Device API Guide Program Outline Mobile GPS Device API Guide Program is a guide application for GPS Device API, using

More information

Web Site Design and Development Lecture 13

Web Site Design and Development Lecture 13 Web Site Design and Development Lecture 13 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Normalize.css Normalize.css is a useful project to incorporate into your web pages In their own words, Normalize.css

More information

Intro, Version Control, HTML5. CS147L Lecture 1 Mike Krieger

Intro, Version Control, HTML5. CS147L Lecture 1 Mike Krieger Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Hello! - A little about me. Hello! - And a little bit about you? By the end of today - Know what this lab will & won t teach you - Have checked

More information

Dreamweaver: Portfolio Site

Dreamweaver: Portfolio Site Dreamweaver: Portfolio Site Part 3 - Dreamweaver: Developing the Portfolio Site (L043) Create a new Site in Dreamweaver: Site > New Site (name the site something like: Portfolio, or Portfolio_c7) Go to

More information

ROGRAMMING USING GOOGLE MAPS API ONLINE TRAINING

ROGRAMMING USING GOOGLE MAPS API ONLINE TRAINING ROGRAMMING USING GOOGLE MAPS API ONLINE TRAINING Training Course.com TYC COURSE GOALS El curso plantea abarcar muchos aspectos del potencial de la API de Google Maps para que el alumno pueda desarrollar

More information

HTML & CSS Cheat Sheet

HTML & CSS Cheat Sheet 1 HTML & CSS Cheat Sheet Fall 2017 HTML & CSS Cheat Sheet from Typographic Web Design 3 by Laura Franz Web safe fonts vs web fonts You can expect these web safe fonts to work across most platforms and

More information

A designers guide to creating & editing templates in EzPz

A designers guide to creating & editing templates in EzPz A designers guide to creating & editing templates in EzPz Introduction...2 Getting started...2 Actions...2 File Upload...3 Tokens...3 Menu...3 Head Tokens...4 CSS and JavaScript included files...4 Page

More information

Slug: HTML5 for Mobile Web Applications, ISBN number, 23! kyrnin hour23-code.doc

Slug: HTML5 for Mobile Web Applications, ISBN number, 23! kyrnin hour23-code.doc Slug: HTML5 for Mobile Web Applications, ISBN number, 23! kyrnin hour23-code.doc Hour 23 Code to detect support for GeoLocation, simply detect if the browser has that object: function supports_geolocation()

More information

Chapter 7 BMIS335 Web Design & Development

Chapter 7 BMIS335 Web Design & Development Chapter 7 BMIS335 Web Design & Development Site Organization Use relative links to navigate between folders within your own site o Sometimes dividing your site into folders makes maintenance and updating

More information

Universal CSS Navigation Menu: Advanced Styling Patrick Julicher Universal CSS Navigation Menu: Advanced Styling

Universal CSS Navigation Menu: Advanced Styling Patrick Julicher Universal CSS Navigation Menu: Advanced Styling Universal CSS Navigation Menu: Advanced Styling Page 1 of 15 Content 1. Introduction... 3 2. How to use... 3 2.1. Editing existing CSS Styles... 3 2.2. Creating new CSS Styles... 6 3. Explanation of styles...

More information

Client-side Web Engineering 2 From XML to Client-side Mashups. SWE 642, Spring 2008 Nick Duan. February 6, What is XML?

Client-side Web Engineering 2 From XML to Client-side Mashups. SWE 642, Spring 2008 Nick Duan. February 6, What is XML? Client-side Web Engineering 2 From XML to Client-side Mashups SWE 642, Spring 2008 Nick Duan February 6, 2008 1 What is XML? XML extensible Markup Language Definition: XML is a markup language for documents

More information

GPS Device API Guide Program

GPS Device API Guide Program http://www.egovframe.go.kr/wiki/doku.php?id=egovframework:hyb3.5:guide:add:gps GPS Device API Guide Program Outline Mobile GPS Device API Guide Program is a guide application for GPS Device API, using

More information

SEEM4570 System Design and Implementation. Lecture 1 Cordova + HTML + CSS

SEEM4570 System Design and Implementation. Lecture 1 Cordova + HTML + CSS SEEM4570 System Design and Implementation Lecture 1 Cordova + HTML + CSS Apache Cordova Apache Cordova, or simply Cordova, is a platform for building native mobile apps using HTML, CSS and JavaScript E.g.

More information

Let's see a couple of examples

Let's see a couple of examples Javascript Examples Let's see a couple of examples Last 2 sessions we talked about Javascript Today: - Review Javascript basics by going through some examples - In the process we will also learn some new

More information

Web Development and HTML. Shan-Hung Wu CS, NTHU

Web Development and HTML. Shan-Hung Wu CS, NTHU Web Development and HTML Shan-Hung Wu CS, NTHU Outline How does Internet Work? Web Development HTML Block vs. Inline elements Lists Links and Attributes Tables Forms 2 Outline How does Internet Work? Web

More information

JavaScript (5A) JavaScript

JavaScript (5A) JavaScript JavaScript (5A) JavaScript Copyright (c) 2012 Young W. Lim. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any

More information

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 In this chapter, you will learn how to... LEARNING OUTCOMES Code relative hyperlinks to web pages in folders within a website Configure

More information

IBM Bluemix Node-RED Watson Starter

IBM Bluemix Node-RED Watson Starter IBM Bluemix Node-RED Watson Starter Cognitive Solutions Application Development IBM Global Business Partners Duration: 45 minutes Updated: Feb 14, 2018 Klaus-Peter Schlotter kps@de.ibm.com Version 1 Overview

More information

CS197WP. Intro to Web Programming. Nicolas Scarrci - February 13, 2017

CS197WP. Intro to Web Programming. Nicolas Scarrci - February 13, 2017 CS197WP Intro to Web Programming Nicolas Scarrci - February 13, 2017 Additive Styles li { color: red; }.important { font-size: 2em; } first Item Second

More information

CSC309 Programming on the Web week 3: css, rwd

CSC309 Programming on the Web week 3: css, rwd CSC309 Programming on the Web week 3: css, rwd Amir H. Chinaei, Spring 2017 Office Hours: M 3:45-5:45 BA4222 ahchinaei@cs.toronto.edu http://www.cs.toronto.edu/~ahchinaei/ survey 1 in survey 1, you provide

More information

Class 9 / Instructor: Ira Epstein

Class 9 / Instructor: Ira Epstein Fashion Institute of Technology http://www.iraworks.com/fit Introduction to Web Design / CT244 Instructor: Ira Epstein iraepst@gmail.com Class 9 / 4-3-18 1) Attendance and Announcements... 2:10-2:20 a)

More information

Developing Apps for the BlackBerry PlayBook

Developing Apps for the BlackBerry PlayBook Developing Apps for the BlackBerry PlayBook Lab # 2: Getting Started with JavaScript The objective of this lab is to review some of the concepts in JavaScript for creating WebWorks application for the

More information

Introduction to using HTML to design webpages

Introduction to using HTML to design webpages Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the

More information

Designing Responsive Web Mobile Mapping Applications. Andy

Designing Responsive Web Mobile Mapping Applications. Andy Designing Responsive Web Mobile Mapping Applications Andy Gup, @agup Reponsive Libraries And User Interface Frameworks Web Mobile Design Key Considerations Mobile Devices Are different Physical device

More information

THE HITCHHIKERS GUIDE TO HTML

THE HITCHHIKERS GUIDE TO HTML THE HITCHHIKERS GUIDE TO HTML Computer Science I Designing technology solutions Mr. Barrett http://thestrategicblogger.com/ What is HTML HTML is a markup language for describing web pages HTML is used

More information

Supply Cars Affiliate Manual Version 1.0

Supply Cars Affiliate Manual Version 1.0 Supply Cars Affiliate Manual Version 1.0 Contents Introduction Technology Suppliers Booking engine integration Affiliate Support Coverage Downtime Security Commission How we work Booking engine integration

More information

Integration guide. Contents. Consentmanager.net

Integration guide. Contents. Consentmanager.net Integration guide Contents How to start?... 2 Setup your website and CMP... 2 Create own Design/s... 3 Aligning Texts... 4 Further customization of the CMP... 4 Integrating the CMP into your website/s...

More information

Search API (LFASparql)

Search API (LFASparql) Search API (LFASparql) LFASparql is a JavaScript library to search for resources on LOD4ALL. By using the LFASparql, you will be able to cross-search for resources of data sets that are registered in LOD4ALL,

More information

Dynamic Select Option Menu Using Ajax And PHP. Wednesday, Mar 11, 2015

Dynamic Select Option Menu Using Ajax And PHP. Wednesday, Mar 11, 2015 Page 1 of 7 TalkersCode.com HTML CSS JavaScript jquery PHP MySQL Web Development Tutorials Dynamic Select Option Menu Using Ajax And PHP. Wednesday, Mar 11, 2015 Share 4 Stum Tags:- Ajax jquery PHP MySQL

More information

SEO Authority Score: 40.0%

SEO Authority Score: 40.0% SEO Authority Score: 40.0% The authority of a Web is defined by the external factors that affect its ranking in search engines. Improving the factors that determine the authority of a domain takes time

More information

LING 408/508: Computational Techniques for Linguists. Lecture 14

LING 408/508: Computational Techniques for Linguists. Lecture 14 LING 408/508: Computational Techniques for Linguists Lecture 14 Administrivia Homework 5 has been graded Last Time: Browsers are powerful Who that John knows does he not like? html + javascript + SVG Client-side

More information

Web Designing HTML5 NOTES

Web Designing HTML5 NOTES Web Designing HTML5 NOTES HTML Introduction What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages

More information

Create a cool image gallery using CSS visibility and positioning property

Create a cool image gallery using CSS visibility and positioning property GRC 275 A8 Create a cool image gallery using CSS visibility and positioning property 1. Create a cool image gallery, having thumbnails which when moused over display larger images 2. Gallery must provide

More information

Front-End UI: Bootstrap

Front-End UI: Bootstrap Responsive Web Design BootStrap Front-End UI: Bootstrap Responsive Design and Grid System Imran Ihsan Assistant Professor, Department of Computer Science Air University, Islamabad, Pakistan www.imranihsan.com

More information

CSCU9B2 Practical 8: Location-Aware Web Pages NOT USED (DOES NOT ALL WORK AS ADVERTISED)

CSCU9B2 Practical 8: Location-Aware Web Pages NOT USED (DOES NOT ALL WORK AS ADVERTISED) CSCU9B2 Practical 8: Location-Aware Web Pages NOT USED (DOES NOT ALL WORK AS ADVERTISED) Aims: To use JavaScript to make use of location information. This practical is really for those who need a little

More information

Google Web Toolkit Creating/using external JAR files

Google Web Toolkit Creating/using external JAR files Google Web Toolkit Creating/using external JAR files If you develop some code that can be reused in more than one project, one way to create a module is to create an external JAR file. This JAR file can

More information

Min-Yuh Day, Ph.D. Assistant Professor Department of Informa9on Management Tamkang University

Min-Yuh Day, Ph.D. Assistant Professor Department of Informa9on Management Tamkang University Tamkang University Social Media Apps Programming Google App Engine and Google Map API 1041SMAP11 TLMXM1A (8687) (M2143) (Fall 2015) (MIS MBA) (2 Credits, Elec9ve) [Full English Course] Wed 9,10 (16:10-18:00)

More information

Mobile Applications 2013/2014

Mobile Applications 2013/2014 Mobile Applications 2013/2014 Mike Taylor Product Manager February 6, 2015 Advanced Development Technology Agenda Devices App Types Test/Deploy Summary Devices Mobile (Feature) Phones Windows version 5/6

More information

jmaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc.

jmaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc. jmaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com Agenda What is and Why jmaki? jmaki widgets Using jmaki widget - List widget What makes up

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

Web Authoring and Design. Benjamin Kenwright

Web Authoring and Design. Benjamin Kenwright CSS Div Layouts Web Authoring and Design Benjamin Kenwright Outline Review Why use Div Layout instead of Tables? How do we use the Div Tag? How to create layouts using the CSS Div Tag? Summary Review/Discussion

More information

Asciidoctor Demo. Dan Allen

Asciidoctor Demo. Dan Allen Asciidoctor Demo Dan Allen Table of Contents 1. First Steps with AsciiDoc..................................................................... 1 1.1. Lists Upon Lists..........................................................................

More information

Computer Science nd Exam Prof. Papa Tuesday, April 28, 2016, 6:00pm 7:20pm

Computer Science nd Exam Prof. Papa Tuesday, April 28, 2016, 6:00pm 7:20pm Computer Science 571 2 nd Exam Prof. Papa Tuesday, April 28, 2016, 6:00pm 7:20pm Name: Student ID Number: 1. This is a closed book exam. 2. Please answer all questions on the test Frameworks and Agile

More information

CIE-H12 Web page Sample

CIE-H12 Web page Sample eztcp Technical Document CIE-H12 Web page Sample Version 1.0 2011-08-31 Sollae Systems Co., Ltd. http://www.sollae.co.kr Contents Contents 1 Overview... 3 1.1 Overview... 3 2 Default... 4 2.1 Simple Modification

More information

Create a three column layout using CSS, divs and floating

Create a three column layout using CSS, divs and floating GRC 275 A6 Create a three column layout using CSS, divs and floating Tasks: 1. Create a 3 column style layout 2. Must be encoded using HTML5 and use the HTML5 semantic tags 3. Must se an internal CSS 4.

More information

Django Leaflet Documentation

Django Leaflet Documentation Django Leaflet Documentation Release 0.20 Makina Corpus Oct 04, 2017 Contents 1 Installation 3 1.1 Configuration............................................... 3 1.2 Example.................................................

More information

INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations

INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations Hun Myoung Park (2/2/2018) Layout & Position: 1 INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations DCC5382 (2 Credits) Introduction

More information

WEB MAPPING WITH GOOGLE MAPS MASHUPS: OVERLAYING GEODATA

WEB MAPPING WITH GOOGLE MAPS MASHUPS: OVERLAYING GEODATA WEB MAPPING WITH GOOGLE MAPS MASHUPS: OVERLAYING GEODATA I. O. Bildirici a, *, N.N. Ulugtekin b a Selcuk University, Faculty of Eng., Dept. of Geomatic Engineering, 42079 Selcuklu Konya, Turkey bildirici@selcuk.edu.tr

More information

«FitPhoto» Integration

«FitPhoto» Integration «FitPhoto» Integration Version 4.3 EN Date 21/08/2012 Company FittingBox 2010 FittingBox Reserved 1 / 20 Table of contents 1. Basic Setup... 3 2. Loading FitPhoto... 4 2.1. Synchronous integration (Recommended)...

More information

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question

More information

CSCI 1100L: Topics in Computing Spring 2018 Web Page Project 50 points

CSCI 1100L: Topics in Computing Spring 2018 Web Page Project 50 points CSCI 1100L: Topics in Computing Spring 2018 Web Page Project 50 points Project Due (All lab sections): Check on elc Assignment Objectives: Lookup and correctly use HTML tags. Lookup and correctly use CSS

More information

Building Responsive Layouts

Building Responsive Layouts Building Responsive Layouts by Zoe Mickley Gillenwater @zomigi zomigi.com December 5, 2012 CSS Dev Conf hello nice to meet you 2 I don t use a mobile phone I have a process for eating these why responsive

More information

Cascading Style Sheets CSCI 311

Cascading Style Sheets CSCI 311 Cascading Style Sheets CSCI 311 Learning Objectives Learn how to use CSS to style the page Learn to separate style from structure Styling with CSS Structure is separated from style in HTML5 CSS (Cascading

More information

COPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1

COPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1 59313ftoc.qxd:WroxPro 3/22/08 2:31 PM Page xi Introduction xxiii Chapter 1: Creating Structured Documents 1 A Web of Structured Documents 1 Introducing XHTML 2 Core Elements and Attributes 9 The

More information

CSC 337. jquery Rick Mercer

CSC 337. jquery Rick Mercer CSC 337 jquery Rick Mercer What is jquery? jquery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

More information

WebGIS exercise Land Change Viewer. Elisabeth Weinke Department of Geoinformatics University of Salzburg

WebGIS exercise Land Change Viewer. Elisabeth Weinke Department of Geoinformatics University of Salzburg WebGIS exercise Land Change Viewer Elisabeth Weinke Department of Geoinformatics University of Salzburg Overview Client Application OpenLayers Google Maps Interface WMS WFS Server GeoServer Data management

More information

Responsive Web Design. From: Ethan Marcotte - Responsive Web Design 2011

Responsive Web Design. From: Ethan Marcotte - Responsive Web Design 2011 Responsive Web Design From: Ethan Marcotte - Responsive Web Design 2011 Motivation Browser windows have their inconsistencies and imperfections Once web pages are published online, the designs are immediately

More information

As we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.

As we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application. Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address

More information