Jump to content

Search the Community

Showing results for tags 'Map'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 10 results

  1. I have been using W3 CSS references to help set up a web page and it works perfectly until I try to play with it. As soon as I try to add the extra marker it doesn't show up on the web page, but there is no indication that the script is in error. I want to add two markers to the one map so that the Church and the Presbytery are both displayed. The lat and long for the church are (-27.557692, 151.932294). The lat and lng for the presbytery are: (lat:-27.557458,lng:151.932975) This is the existing code. Can someone tell me what I have to do to make two markers appear? Thanks <!-- Google Maps --> <div id="googleMap" style="width:100%;height:420px;"></div> <script> function myMap() { myCenter=new google.maps.LatLng(-27.557692, 151.932294); var mapOptions= { center:myCenter, zoom:14, scrollwheel: false, draggable: false, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions); var marker = new google.maps.Marker({ position: myCenter, }); marker.setMap(map); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSg2YnESq0U3ncI0oZ8A_9SQSc1Sd4Edo&callback=myMap"></script> <!-- To use this code on your website, get a free API key from Google.
  2. Hello Everyone I don't have a specific html Problem, but more a question how I could achieve something I'm trying to do. I'm neiter sure if this is the right forum. I'm sorry if not. So here is my idea. I have this map and my idea is to make it interactive. When I click on a textfield ond the image a new window opens, where I can add text. (to describe the the country that I have clicked) What I had in mind is to make it as a startpage on a wiki and when I click on the text area the related Wiki-entry opens. After it would be the idea to make it a collaborative tool for students, that they can collect together important information about a country or an other topic. What I'm asking is more about the tool and less about the example. It could be used also with other maps. The example helps to understand, what I want to do. So what would be the best idea to create this first page with the whole map. I had the idea to set the map as background of a table (with CSS) and to put in the text in the table boxes and then link the text to the related wiki-entry. (Or create a link and a new wiki-entry if there is none.) (On the map image itself there will be no text, not as shown in the example) Is there a better or easier way to make it? Thanks for your ideas.
  3. Hello All, I am stuck trying to filter results of a json response. I have a sample json response: [ { "id":0, "commentText":"Test", "createdBy":"User1", "isImportant":false }, { "id":1, "commentText":"Hello World", "createdBy":"User2", "isImportant":true }, { "id":2, "commentText":"Testing", "createdBy":"User2", "isImportant":false }, { "id":3, "commentText":"This is another one", "createdBy":"User2", "isImportant":true }, { "id":4, "commentText":"Hello World!", "createdBy":"User2", "isImportant":true } ] I am attempting to filter out results that "isImportant" are not true. I have tried multiple ways of doing it with no luck. IE. var response = $(jsonSample).filter(function (i,n){ return n.isImportant===true }); var response2 = $.grep(Object(jsonSample), function(j){ return j.isImportant !== false; }); var response3 = $.map(jsonSample, function (n,i){ $.each(n, function(j){ return n.isImportant !== false; }) }); console.log(response); //jquery-2.2.4.min.js:2 Uncaught Error: Syntax error, unrecognized expression: ... console.log(response2); //logs every individual character in the jsonSample ["[", "{", """, "i", "d", """, ":", "1", ... console.log(response3); //jquery-2.2.4.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in ...
  4. Hello all, I'm code php concern with google map api, run it don't alert error, still marker and display infowindows but map don't display, I need hear some advice or guide to solve it problem. thank for helpP/s: Sorry that my ability of English is not good
  5. m-idea

    google map

    my friends i want too desing google map with The following conditions giv the Coordinate and show this where in the map you can download my map and help me mymap.htmlstyle.css
  6. How can I create an interactive chart like this: http://se.deltasd.bc.ca/vision/ while using HTML5?
  7. Does anyone know how or what code to use to make a interactive map that has certain regions pop up? Thanks!
  8. I've been messing around with the map and area elements (for the first time) to build a navigation bar with images, and I've run into a couple problems. The first problem is the images used in the navigation bar aren't aligning in firefox how I think I set them to align. Here is capture, from firefox, showing what I mean: However, they align exactly how I want them to align in all the other major browsers. For instance, here is capture from chrome: The code in question is the cell with the id of navigation. Additionally I would like to be able to create a hover state, and an active state for these images used in the navigation bar. This is the second problem I've been having. I don't know if it's even possible to use CSS on images to create a hover state for a link. If it is, I'm surely doing something wrong, based on the things I've tried. I'd like to be able to change the image when hovered over, and at the very least I'd like to be able to underline the image on hover. I checked around to see what I could find, but I didn't find anything that I perceived as an answer to my problems. Any help would be greatly appreciated. This is my HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sarasota-Tampa Express Homepage</title><link href="all.css" rel="stylesheet" type="text/css" /></head><body id="theHeader" ><table id="headerTable" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="logoBox"> <img src="images/Sarasota-Tampa-Express-Logo.png" width="205" height="75" alt="Logo" /></td> <td> <table id="rightsideHeader" border="0" cellspacing="0" cellpadding="0"> <tr> <td><p id="tagLine">We make things convenient for you! <span id="phoneNumber">Call Today! (941)366-6600</span></p> </td> </tr> <tr> <td align="left" valign="top" id="navigation"><img src="images/home.png" usemap ="#home" id="home"/><map name="home"><area shape="poly" coords="-3,0,74,0,74,8,79,16,74,24,74,33,-3,33" href="index.html" alt="Home"/></map><img src="images/about-us.png" id="aboutUs" usemap ="#aboutUs"/><map name="aboutUs"><area shape="poly" coords="0,0,105,0,105,8,110,16,105,24,105,33,0,33,0,24,5,16,0,8" href="index.html" alt="About us"/></map><img src="images/route-and-schedule.png" id="routeAndSchedule" usemap="#routeAndSchedule"/><map name="routeAndSchedule"><area shape="poly" coords="0,0,173,0,173,8,178,16,173,24,173,33,0,33,0,24,5,16,0,8" href="index.html" alt="Route And Schedule"/></map><img src="images/flight-information.png" id="flightInfo" usemap="#flightInfo"/><map name="flightInfo"><area shape="poly" coords="0,0,179,0,179,8,184,16,179,24,179,33,0,33,0,24,5,16,0,8" href="index.html" alt=" Flight Information"/></map><img src="images/fare.png" id="fare" usemap="fare"/><map name="fare"><area shape="poly" coords="0,0,70,0,70,33,0,33,0,24,5,16,0,8" href="index.html" alt="Fare"/></map></td> </tr> </table> </td> </tr></table><table id="mainTable" align="center"> <tr> <td> </td> </tr> </table> </body></html> This is my CSS: @charset "utf-8";.body {font-family: Verdana, Geneva, sans-serif;}.table {margin: 0px;padding: 0px;}.td {margin: 0px;padding: 0px;}/*==== header ====*/#theHeader {background-repeat: repeat-x;background-image: url(images/header-gradient.png);margin: 0px;}#headerTable {height: 150px;width: 1024px;margin-left: auto;margin-right: auto;/*==== leftside header ====*/}#logoBox {width: 268px;padding-left: 50px;}/*==== rightside header ====*/#rightsideHeader {height: 150px;}#tagLine {font-family: Verdana, Geneva, sans-serif;font-size: 16px;font-style: italic;text-align: left;color: #FFF;padding-top: 12px;}#phoneNumber {padding-left: 80px;} #navigation {height: 67px;width: 700px;padding-left: 0px;}img {border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;text-decoration: none;}#navbar {padding: 0px;height: 34px;width: 605px;}#home { } /*==== main content ====*/#mainTable {background-image: url(images/background-gradients.png);height: 618px;width: 1024px;}#aboutUs {position: relative;right: 5px;}#routeAndSchedule {position: relative;right: 10px;}#flightInfo {position: relative;right: 15px;}#fare {position: relative;right: 20px;}
  9. The image map below does not work in IE7 (but works in IE8+)I searched online for this and know a little bit of the reason that it might be because of IE7 not reading setAttribute properly and thus I relied on the use img.useMap instead of img.setAttribute("usemap","#map")Can anyone provide a simple fix? Many thanks! <script>window.onload = function(){var img = document.createElement("img");img.setAttribute("src","http://prodesigntools.com/img/adobe-cs5-icons.jpg");img.style.width = 1000+"px";img.style.height = 1000+"px";img.useMap = "#map";document.body.appendChild(img);var map = document.createElement("map");map.name = "map";map.innerHTML = "<area shape='rect' coords='0,0,500,500' href='javascript: alert(0)' /><area shape='rect' coords='500,0,1000,500' href='javascript: alert(1)' />"document.body.appendChild(map);}</script>
  10. How can I make a button image overlap without overlapping the selectable areas? My idea was to use the map and area tags to change the selectable area of each image but I don't know how to overlap the images.Honestly, I don't know if this is the best way to handle my problem and I would be more than happy to hear suggestions.
  • Create New...