Jump to content

Search the Community

Showing results for tags 'google-maps'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 2 results

  1. I have done some research into adding date and time elpsing. There seem to be a few different ways it can be done, but I am having trouble fitting it in to work for me. I have managed it so the the map is still displayed and my county selction function works fine, but where I have tried to incorporate the time and date with the marker placement it hasn't worked not does the placement of the marker now either. The error in my browser console states no element found which I google searched with no luck of a resolution exxept for a firefox debug. Here is my coding, If anyone can guide me in where I have gone wrong i would appreciate it thanks. <!DOCTYPE html> <html> <head> <!-- Google Maps and Places API --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var markers = []; function elapsed(rfd) { var rs = (new Date().getTime() - rfd.getTime()) / 1000, days = Math.floor(rs / 86400), hours = Math.floor((rs - (days * 86400 )) / 3600), minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60), secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))), fet = secs + 's'; if(minutes){fet = minutes + 'm' + ' ' + fet;} if(hours){fet = hours + 'h' + ' ' + fet;} if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;} return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago'; } function createMarker(latlng, html, map) { var ref = $.trim($('#reference').val()), infowindow = new google.maps.InfoWindow({ content: ref || html }), marker = new google.maps.Marker({ map: map, time : new Date(), position: latlng, html: html, icon: defaultPin, infowindow: infowindow }), $tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>'); $tm.get(0).selectedIndex = 0; marker.addListener('mouseover', function() { clearInterval(infowindow.timer); infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content).fadeIn(); infowindow.timer = setInterval(function(){ infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content); }, 300); infowindow.open(map, this); }); marker.addListener('mouseout', function() { clearInterval(infowindow.timer); infowindow.close(); $('#supplementwindow').fadeOut(); }); marker.addListener('click', function() { var oe = this.optel; $tm.get(0).selectedIndex = $('option', $tm).index(oe); $tm.trigger('change'); }); marker.optel = $('option', $tm).last(); $tm.get(0).size = $('option', $tm).length; markers.push(marker); } var up206b = {}; var map; function trace(message) { if (typeof console != 'undefined') { console.log(message); } } up206b.initialize = function() { var latlng = new google.maps.LatLng(52.136436, -0.460739); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } var geocoder = new google.maps.Geocoder(); var bounds = new google.maps.LatLngBounds(); $('#formcont form').submit(function(e){ var addresses = $('.address', this); addresses = [addresses.eq(0).val(), addresses.eq(1).val()]; addresses.forEach(function(address, refnum) { if (address) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); createMarker(results[0].geometry.location, address, map, refnum); bounds.extend(results[0].geometry.location); map.fitBounds(bounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); } }); e.preventDefault(); }); jQuery(function($){ $('#removemarker').click(function(){ var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val(); if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ v.setMap(null); markers.splice(idx, 1); return false; } }); $o.remove(); bounds = new google.maps.LatLngBounds(); if(markers.length){ $.each(markers, function(i, v){ bounds.extend(v.position); }); map.fitBounds(bounds); } if(markers.length < 2){ map.setZoom(markers.length? 13 : 8); } }); $('#themarkers').change(function(){ this.title = this.options[this.options.selectedIndex].title; var i = this.value; if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ map.setCenter(v.position); map.setZoom(10); return false; } }); }); $('#showall').click(function(){ $('#themarkers').get(0).selectedIndex = 0; if(!markers.length){ map.setCenter(new google.maps.LatLng(52.136436, -0.460739)); map.setZoom(13); return; } map.fitBounds(bounds); if(markers.length === 1){ map.setZoom(13); } }); }); </script> </head> <body onload="up206b.initialize()"> <div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px"> <h1 align="center">Map Search</h1> <div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" > <form > <br> Location 1 <input type="text" id="address"> <br> <br> Location 2 <input type="text" id="address2"> <br> <br> Reference <input type="text" id="reference"> <br> <br> <input type="button" value="Submit" onClick="up206b.geocode()"> </form> </div> <div id="menu" style=" position: absolute; margin: 45px 89px;" > <select id="counties" > <option value="">Select County</option> <option value="bedfordshire">Bedfordshire</option> <option value="buckinghamshire">Buckinghamshire</option> <option value="cambridgeshire">Cambridgeshire</option> <option value="hertfordshire">Hertfordshire</option> <option value="northamptonshire">Northamptonshire</option> </select> </div> <script type="text/javascript"> $("#counties").on("change",function(){ var cnt=$(this).val(); var bounds = new google.maps.LatLngBounds(); switch(cnt){ case "bedfordshire": bounds.extend(new google.maps.LatLng( 52.22, -0.41)); bounds.extend(new google.maps.LatLng(51.8797, -0.4176)); break; case "buckinghamshire": bounds.extend(new google.maps.LatLng(52.18, -0.83)); bounds.extend(new google.maps.LatLng(51.9206978, -0.6529431)); break; case "cambridgeshire": bounds.extend(new google.maps.LatLng(52.29, -0.13)); bounds.extend(new google.maps.LatLng(52.082174, -0.029477)); break; case "hertfordshire": bounds.extend(new google.maps.LatLng(52.082174, -0.029477)); bounds.extend(new google.maps.LatLng(51.8031689, -0.208661)); break; case "northamptonshire": bounds.extend(new google.maps.LatLng(52.492298, -0.684233 )); bounds.extend(new google.maps.LatLng(52.09, -1.03)); break; } map.fitBounds(bounds); }) </script> </div> <div id="map_canvas" style="height: 500px; width: 500px; float:right; margin:20px 75px;"></div> <div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" > <input type="button" value="Assign"> </div> <div id="menu2" style="position: absolute; right: 200px; top: 450px; border: 1px solid #bbb; padding: 5px; border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option> </select><br> <input type="button" id="showall" title="Or Reset if None" value="Show All"><br> <input type="button" id="removemarker" value="Remove Marker"></div> </body> </html>
  2. I am making a google map in a circle shape in my footer. I was able to make it work for Mozilla and IE but I am having problems with Chrome. From the researcher I did, the problem is with border-radius not working for Chrome or overflow:hidden; Unfortunately I wasn't able to fix the problem. Here is a link to a website, map is located in the footer. WEBSITE And here is my custom css for the map .custommap{ border: 5px solid #fff; overflow:hidden; border-radius:999px; -moz-border-radius:999px; -webkit-border-radius:999px; -o-border-radius:999px; width: 18% !important; height: 16em !important; } Here are also images of Mozzilla and Chrome in comparison
×
×
  • Create New...