Ejemplos Google Maps v3
|
|
- Jewel Bruce
- 6 years ago
- Views:
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 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 information1061SMAP12 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 informationHTML5 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 informationBuilding 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 informationOnline 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 informationSEEM4570 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 informationLab 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 informationStamp 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 informationSEEM4570 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 informationsrc1-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 informationiphone 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 informationPositioning 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 informationAdaptive 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 informationLecture 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 informationHTML 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 informationHere 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 informationIntroduction 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 informationTAG 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 informationSimple 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 informationImplementing 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 informationIntroduction 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 informationTLN 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 informationBuilding 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 informationGIMP 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 informationWireframe :: 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 informationNAVIGATION 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 informationScriptaculous 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 informationConfiguring 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 informationMobile 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 informationHTML 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 informationUsing 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 informationTo 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 informationWeek 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 informationHoster: 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 information12/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 informationPurpose 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 informationCREATIVE & TECHNICAL SPECIFICATIONS
CREATIVE & TECHNICAL SPECIFICATIONS CREATIVE SPECIFICATIONS EXPECTED ASSETS LANDSCAPE: 96Ox424px ipad: 768x928px 1O24x672px SAME SIZE FOR INTERSCROLLER SMARTFOOTER MPU INCONTENT INTERSTITIAL 64Ox2OOpx
More informationTechnoparkstrasse 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 informationGPS 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 informationWeb 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 informationIntro, 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 informationDreamweaver: 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 informationROGRAMMING 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 informationHTML & 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 informationA 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 informationSlug: 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 informationChapter 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 informationUniversal 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 informationClient-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 informationGPS 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 informationSEEM4570 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 informationLet'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 informationWeb 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 informationJavaScript (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 informationWEB 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 informationIBM 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/bodyshop/restrictive.htm. The descriptive text (between the <p>what type of critter would you like to be?
generic Bodyshop
More informationCS197WP. 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 informationCSC309 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 informationClass 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 informationDeveloping 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 informationIntroduction 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 informationDesigning 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 informationTHE 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 informationSupply 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 informationIntegration 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 informationSearch 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{block:description} <meta name="description" content="{description}"/> {/block:description}
More information
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 informationSEO 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 informationLING 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 informationWeb 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 informationCreate 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 informationFront-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 informationCSCU9B2 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 informationGoogle 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 informationMin-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 informationMobile 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 informationjmaki 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 informationIntroduction 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 informationWeb 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 informationAsciidoctor Demo. Dan Allen
Asciidoctor Demo Dan Allen Table of Contents 1. First Steps with AsciiDoc..................................................................... 1 1.1. Lists Upon Lists..........................................................................
More informationComputer 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 informationCIE-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 informationCreate 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 informationDjango 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 informationINTERNATIONAL 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 informationWEB 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 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 informationGIMP 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 informationCSCI 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 informationBuilding 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 informationCascading 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 informationCOPYRIGHTED 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</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
StepOne
More informationCSC 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 informationWebGIS 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 informationResponsive 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 informationAs 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