|
JavaScript - Googel Maps Api - Toggle Circles Around Markers?
I'm trying to show an array of markers which, when clicked, will show an infowindow and also a circle with a radius, the size of which is also part of the array.
I've got as far as showing the markers, the infoboxes and the circles, but am struggling with toggling the circles. I haven't quite made up my mind if I want the circles to all be initially on or off, I guess that depends how many I end up with... Here's what I have so far: - Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps API Tests</title>
<style type="text/css">
html {font-family:Tahoma,verdana,sans-serif; font-size:0.75em;}
p {font-weight:bold;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
function initialize() {
var myLatlng = new google.maps.LatLng(36.637484, -121.51057);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
['Google', 37.422117, -122.083856, 'http://www.google.com/', 402336],
['Yahoo', 34.030194, -118.47479, 'http://www.yahoo.com/', 201168]
];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
html: '<p>'+sites[0]+'</p><a href="'+sites[3]+'">Web Link</a>'
});
var circle = new google.maps.Circle({
map: map,
radius: sites[4],
fillColor: '#12a3eb',
fillOpacity: 0.15,
strokeColor: '#0177b3'
});
circle.bindTo('center', marker, 'position');
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Any help would be much appreciated! Similar TutorialsFellow Coders, I am trying to follow this tutorial (http://econym.org.uk/gmap/basic16.htm) What I would like to do is have in my XML file, a parameter for a total (some random number) and I want to plot a marker based on this number. So like, if the total="5" then marker would be red, if it was 10, marker would be green. I see in the tutorial that they are storing the possible markers in an array, I get that. What I don't know how to do is plot the markert depending on the value of the total field in the XML file. I am trying to make google maps zoom to fit markers, I made this super simple example that should work but blows up when it comes time to create the LatLngList Array. I'm using this guys code that everyone says works:http://blog.shamess.info/2009/09/29/...e-maps-api-v3/ Code: <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBFaOhZzSroCxheTo9stXtkicU3bNHwcho&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// Make an array of the LatLng's of the markers you want to show
var LatLngList = array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017));
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds ();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds (bounds);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:650px;height:550px;"></div>
</body>
</html>
Hello I need some help with Google Maps please. Im using Google Maps API V3. So I can create a simple map but what I need is to have two markers (which are quite far apart) on the map. For example these markers are called 'Marker 1' and 'Marker 2'. Below the map I would have 2 links called for example 'Marker 1 link' and 'Marker 2 link'. When the map loads, 'Marker 1' is visible and centered. Now to move to 'Marker 2' on the map, I would click the link under the map. And vice versa. A good example is http://arts.brighton.ac.uk/contact-u...aculty-of-arts I tried but failed when I tried this guys answer on this website: http://stackoverflow.com/questions/2...utside-the-map Any help to create this is greatly appreciated! Hi, not sure if this is quite the right forum to ask this, but it is a javascript function after all so I thought I'd give it a shot. Here's the problem: I have an array of latitude/longitude data. I need to make a marker appear on the map for each lat/lng pair. But it won't. If I ask the function to print out the coordinates instead of marking them on the, map, it works fine. I don't get an error message either way, so I'm stuck. The page displays the map but without any markers. Here's the code of the function that should add markers: Code: //adds markers to the map
function addMarkers(locarray) {
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locarray.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locarray[i][0], locarray[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('some words');
infowindow.open(map, marker);
}
})(marker, i));
}
}
Here's the initialize function (called on body load): Code: function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = codeAddress("<?php echo $_POST['postal']; ?>");
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
geocoder and map are declared as global variables. The codeAddress function returns lat and lng of the place I want to center the map around, it's been tested and works perfectly. And here is the script that declares the array and calls the addMarkers function: Code: <script type='text/javascript'>
var locations = [
[-33.890542, 151.274856],
[-33.923036, 151.259052],
[-34.028249, 151.157507],
];
addMarkers(locations)
</script>
Does anyone see anything wrong with this? Hi guys. I have posted about this before on here but I'm still having a lot of issues. MY GOAL - I have a database with a bunch of items and each has latitude, longitude and a category (all the items are within 1 city). I want to have a page that will show a google map, display a marker based on the lat/lng and the image of the marker should be customized based on the category of the row. For example, some rows have a 'food' category and some have a 'health' category - I have specific images I want displayed for each image. I need a script that will plot a marker for each item in my db. I have never used Google maps API before and I'm thinking V3 is what I need to use. Can someone help fill in the code below? PHP Code: $query=mysql_query("SELECT * FROM table"); while($row=mysql_fetch_array($query)){ $lat=$row['lat']; $lng=$row['lng']; $category=$row['category']; //SET MARKER PICTURE TO $category //ADD MARKER TO MAP } Can anybody help out with the code? I don't know javascript that well and I have tried about 40 different things and get nothing but a blank page! THANK YOU SO MUCH Hi guys, so far any values recorded in my database are shown on the map: http://www.vfrflight.co.uk/new2/phpsqlajax_map_v3.html Code: <!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
However, how do i let people place markers when a button is pressed. I believe this is the code to place markers when left click occurs: Code: <!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(37.4419, -122.1419);
var options = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
var html = "<table>" +
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Type:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>bar</option>" +
"<option value='restaurant'>restaurant</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
}
function saveData() {
var name = escape(document.getElementById("name").value);
var address = escape(document.getElementById("address").value);
var type = document.getElementById("type").value;
var latlng = marker.getPosition();
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
"&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Location added.";
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="message"></div>
</body>
</html>
Help would be appreicated very much! I cannot combine the codes to save my life... I pulled this code from Google's example section to make markers on a v3 Google Maps API (I have added my own lat/long points and corresponding event listeners, of course, but this is still the spirit of the code):
Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var map_center = new google.maps.LatLng(39.2,-84.479381);
var store1 = new google.maps.LatLng(39.112456,-84.574779);
var store2 = new google.maps.LatLng(39.314153,-84.261379);
var store3 = new google.maps.LatLng(39.197099,-84.667579);
var store4 = new google.maps.LatLng(39.16836,-84.479381);
var myOptions = {
zoom: 10,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker1 = new google.maps.Marker({
position: store1,
map: map,
title:"Store 1"
});
var marker2 = new google.maps.Marker({
position: store2,
map: map,
title:"Store 2"
});
var marker3 = new google.maps.Marker({
position: store3,
map: map,
title:"Store 3"
});
var marker4 = new google.maps.Marker({
position: store4,
map: map,
title:"Store 4"
});
google.maps.event.addListener(marker1, 'click', function() {
map.set_center(store1);
map.set_zoom(16);
});
google.maps.event.addListener(marker2, 'click', function() {
map.set_center(store2);
map.set_zoom(16);
});
google.maps.event.addListener(marker3, 'click', function() {
map.set_center(store3);
map.set_zoom(16);
});
google.maps.event.addListener(marker4, 'click', function() {
map.set_center(store4);
map.set_zoom(16);
});
}
</script>
This works without fail, but when I try to use a javascript array to hold my values and loop my way through the marker creation like so: Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var map_center = new google.maps.LatLng(39.2,-84.479381);
var store_locations = new Array();
var temporary_stuff = new Array();
store_locations[0] = "39.112456,-84.574779";
store_locations[1] = "39.314153,-84.261379";
store_locations[2] = "39.197099,-84.667579";
store_locations[3] = "39.16836,-84.479381";
var myOptions = {
zoom: 10,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for(i=0;i<store_locations.length;i++){
var marker_string = "position: "+new google.maps.LatLng(store_locations[i])+", map: map, title:\"Store "+(i+1)+"\";";
temporary_stuff[i] = new google.maps.Marker(marker_string);
}
var markers = new Array();
for(i=0;i<temporary_stuff.length;i++){
var the_marker = "position: temporary_stuff[" + i + "], map: map, title:\"Store " + (i+1) + "\";";
markers[i]= new google.maps.Marker(the_marker);
}
}
</script>
I get a blank map. Here's a link to the test file: http://rowsdower.freehostia.com/map_test.php It's not throwing up any errors in Firefox's developer or in IE but there it sits, a blank map. I'm sure this isn't clean or optimized code, but it looks correct to me. I've color-coded the code above to show what "for" loops are being used to try to replace which code. Hopefully that makes this more sensible. I haven't even tried to add the listeners yet since I can't get the markers to appear. Can anyone tell me why this isn't working or point me in a more productive direction? Is there a better way already out there that I haven't noticed? Firstly I know this is a PHP issue yet it is within javascript and IMO is the root cause of the problem. I'm trying to output markers from a search query of locations from my database, onto a Google Map (api v.3) using a tut I found http://tips4php.net/2010/10/use-php-...g-data-on-map/ When adding this to my page I'm getting Undefined index:errors. I have changed the variables in the php part of the script to suit my database yet have left everything else alone, cant figure out why I'm still getting a blank map???? Please help.... My code with errors being shown at bottom; Code: <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
<br />
<b>Notice</b>: Undefined index: name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>: Undefined index: lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>: Undefined index: info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.994709, ,'<b></b><br/>');
<br />
<b>Notice</b>: Undefined index: name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>: Undefined index: lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>: Undefined index: info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.985416, ,'<b></b><br/>');
<br />
<b>Notice</b>: Undefined index: name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>: Undefined index: lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>: Undefined index: info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.985416, ,'<b></b><br/>');
<br />
<b>Notice</b>: Undefined index: name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>: Undefined index: lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>: Undefined index: info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(0.000000, ,'<b></b><br/>');
<br />
<b>Notice</b>: Undefined index: name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>: Undefined index: lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>: Undefined index: info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(0.000000, ,'<b></b><br/>');
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
Hi there! Okay, here is my scenario: I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself). The file that is loaded on toggle doesn't have to be PHP, but it would help a lot. Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately. Highly appreciate any help/answers/feedback! Can anyone look at the link below, and tell me why the infoWindow displays the same xml marker node for each marker Thanks Lee http://www.hotels.seotra.com/ I am no javascript coder so apologies for what may be a simple issue, I have a php page that pulls MySQL marker locations I have tried using examples for bounds etc but the map isn't centered or zoomed, it instead seems to center over the Pacific and minimum zoom level (For the url below it should be centered over the Devon region of the UK and zoomed in) the page where you can see the end result is he http://www.peugeotcentral.co.uk/modu...tches&Region=1 I did have some issues in my code whereby I was using deprecated function of GPoint for passing locations but one of the group mods kindly pointed this out and this was replaced with GLatLng but the fault is still there any help much appreciated, I do have the source code for the php if required For my Javascript class, we are to take a code from the book and add on to it. In this code, I decided to add custom markers and info windows for each location. I got the info windows to work but they are the same for each marker. How can I fix this? Here is what I have: Code: <script>
function init() {
var myLatLng = new google.maps.LatLng(36.795209, -3.339844);
var myOptions = {
zoom: 2,
center: myLatLng
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
//This is Location 1
var image = 'image1.jpg';
var canyon= new google.maps.Marker({
position: new google.maps.LatLng(35.9766,-113.7717),
map: map,
title:"Grand Canyon, USA"});
var infoWindow = new google.maps.InfoWindow({
content: "Grand Canyon, USA"});
google.maps.event.addListener(canyon, 'click', function(){
infoWindow.open(map, canyon); });
//This is Location 2
var image = 'image2.jpg';
var paricutin= new google.maps.Marker({
position: new google.maps.LatLng(19.5948,-102.4331),
map: map,
title:"Paricutin, Mexico"});
var infoWindow = new google.maps.InfoWindow({
content: "Paricutin, Mexico"});
google.maps.event.addListener(paricutin, 'click', function(){
infoWindow.open(map, paricutin); });
//This is Location 3
var image = 'image3.jpg';
var victoria= new google.maps.Marker({
position: new google.maps.LatLng(-17.928,25.826),
map: map,
title:"Victoria Falls, Zimbabwe"});
var infoWindow = new google.maps.InfoWindow({
content: "Victoria Falls, Zimbabwe"});
google.maps.event.addListener(victoria, 'click', function(){
infoWindow.open(map, victoria); });
//This is Location 4
var image = 'image4.jpg';
var reef= new google.maps.Marker({
position: new google.maps.LatLng(-17.98,146.76),
map: map,
title:"Great Barrier Reef, Austrailia"});
var infoWindow = new google.maps.InfoWindow({
content: "Great Barrier Reef, Austrailia"});
google.maps.event.addListener(reef, 'click', function(){
infoWindow.open(map, reef); });
//This is Location 5
var image = 'image5.jpg';
var harbor= new google.maps.Marker({
position: new google.maps.LatLng(-22.8424,-43.1502),
map: map,
title:"Harbor Rio De Janerio, Brazil"});
var infoWindow = new google.maps.InfoWindow({
content: "Harbor Rio De Janerio, Brazil"});
google.maps.event.addListener(harbor, 'click', function(){
infoWindow.open(map, harbor); });
//This is Location 6
var image = 'image6.jpg';
var everest= new google.maps.Marker({
position: new google.maps.LatLng(27.98783,86.92476),
map: map,
title:"Mount Everest Peak, Nepal"});
var infoWindow = new google.maps.InfoWindow({
content: "Mount Everest Peak, Nepal"});
google.maps.event.addListener(everest, 'click', function(){
infoWindow.open(map, everest); });
}
google.maps.event.addDomListener(window, 'load', init);
</script>
I have a video (.wmv) that has markers in it one can access these markers in video players like "Windows Media Player" at "view" -> "file markers" I want to embed the video object in an HTML page and be able to let the user jump to these markers via JavaScript or such. I managed to do this with Internet Explorer ודןמע JavaScript but I can't get any other browser to access these markers or any timeline function for that matter. I need to be able to do so cross browser. any ideas? Hello. Can anyone please tell me what information in the second java script code needs to be changed to make a toggle expand in place. The toggles currently expand properly, but the second toggle, as well as the others, jump back up to the first toggle when expanded. The first toggle: <script type="text/javascript">// <![CDATA[ function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; } // ]]></script> The second toggle: <script type="text/javascript">// <![CDATA[ function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; } // ]]></script> Here is the referenced page: http://sprintexperts.info/phones/# Thanks in advance! Hi all, looking for some help. I found this script that does almost everything i need. I have a form that has a small section of two radio buttons when you click on the first one i need a series of text boxes to open wrapped in a div box and that happens great, but when the other one is clicked i need them to go away, the whole div box. also the text boxes also have some hidden fields attached to them will not not pass to the shopping cart if the text boxes are disabled. here is what i have so far. placed in head Code: <SCRIPT LANGUAGE="JavaScript">
function toggle(chkbox, group) {
var visSetting = (chkbox.checked) ? "visible" : "hidden"
document.getElementById(group).style.visibility = visSetting
}</script>
part of the form having issues with Code: <span class="style30" style="text-align:center">Send directly to recipant:</span><input name="product3[]" type="radio" onclick="toggle(this, 'shipGroup');" value="{br}{b}SEND CERT DIRECTLY TO RECIPANT---{/b}"/>
<br/>
<center>
<span class="style30">Send to me to give to the recipant:</span>
<input name="product3[]" type="radio" value="{br}{b}SEND CERT TO ME TO GIVE TO RECIPANT---{/b}" />
</center>
<input type="hidden" name="price3" value=".00" />
<input type="hidden" name="qty3" value="1" />
<input type="hidden" name="noqty3" value="3" />
<div id="shipGroup"><table width="616">
<tr>
<td width="125" style="text-align:left">
<span class="style30">First Name</span>
<input type="hidden" name="product3[]1" value="{br}FIRST NAME:" /></td>
<td width="151"><input type="text" name="product3[]2" value=""/></td>
<td width="147" style="text-align:right"><span class="style30" >Last Name</span>
<input type="hidden" name="product3[]3" value="{br}LAST NAME:" /></td>
<td width="173" style="text-align:left"><input type="text" name="product3[]4" value=""/></td></tr>
<tr><td colspan="3" style="text-align:left"><span class="style30">Address</span>
<input type="hidden" name="product3[]5" value="{br}ADDRESS:" />
<input type="text" name="product3[]6" value="" size="30"/></td>
<td> </td>
</tr>
<tr><td colspan="2" style="text-align:left"><span class="style30">City</span>
<input type="hidden" name="product3[]7" value="{br}CITY:" /><input type="text" name="product3[]8" value=""/></td>
<td><span class="style30">State</span>
<input type="hidden" name="product3[]9" value="{br}STATE:" />
<input type="text" name="product3[]10" value="" size="10"/></td>
<td><span class="style30">Zip code</span>
<input type="hidden" name="product3[]11" value="{br}ZIP CODE:" />
<input type="text" name="product3[]12" value="" size="5"/></td></tr></table>
</div>
please anyone with help will be great I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick. It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected. Here is by code; Javascript; Code: function toggle_visibility(o,id) {
var obj = document.getElementById(id);
obj.style.display=(obj.style.display == 'block')?'none':'block';
if (obj.style.display!='none') {
obj.style.left=zxcPos(o)[0]+20+'px';
obj.style.top=zxcPos(o)[1]+20+'px';}
}
function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
Here is a sample of my a to z table; Code: <table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td>
</tr>
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td>
</tr></table>
And here is an example of the Brand name div ; Code: <div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;">
<a href="Manufacturer-view.asp?ManID=43">VPX</a><br>
<a href="Manufacturer-view.asp?ManID=44">Vyomax</a>
</div>
You can view the site on my test page; http://www.dp-development.co.uk/ProteinStop/site/ (Brand menu on the left nav) Thank you for any help you can give I am trying to toggle a button (button-top) to move 860px to the right when clicked, while a div panel (textbox1) with text slides down next to it. The panel toggles fine when the buttons (wrap or button-top) are clicked, but the button moves to the right, and then does not move back to its original position when the buttons are clicked the second time. I have tried so many different methods of coding this, but i have problems where the button keeps moving further to the right every time it is clicked. or when it does move back, it does it automatically (not on click) and suddenly disappears. Here is the code that I have ended up with so far. Code: $(function() {
$("#textbox1").hide();
$("#wrap").click(function() {
$("#button-top").animate({right: "860px"}, 2000);
$('#textbox1').animate({height: "toggle"}, 2000);
});
});
I'm not sure if this is a JS or CSS problem, but I figure I would start here. What is wrong with the "onload" function that makes it so that I can not initialize the class name? I get no errors and the toggleClass(IDS) function appears to work fine with similar logic tests. What I expect to happen is that the <blockquote id=...> class names be initialized to hide if and only if JS is available for the toggleClass function to work. Here is what I am doing... Code: <!DOC HTML>
<html>
<head>
<title> Toggle Class </title>
<script type="text/javascript">
//<![CDATA[
function toggleClass(IDS) {
var sel = document.getElementById(IDS); // alert(IDS+' : '+sel.className);
if (sel.className != 'hide') { sel.className = 'hide'; }
else { sel.className = 'show'; }
}
window.onload = function() {
var sel = document.getElementsByTagName('*');
for (var i=0; i<sel[i].length; ++i) {
if (sel[i].className == 'show') { sel[i].className = 'hide'; alert(sel[i].id); }
}
}
//]]>
</script>
<style type="text/css">
.show { display: block; }
.hide { display: none; }
li { list-style-type: none; }
#Schedule { margin:0px; padding:5px; }
#Projects { margin:0px; padding:5px; }
</style>
</head>
<body>
<a href="#" onclick="toggleClass('Schedule');return false"> Schedule </a>
<blockquote id="Schedule" class='show'>
<li>Monday:</li>
<li>Tuesday:</li>
<li>Wednesday:</li>
<li>Thursday:</li>
<li>Friday:</li>
</blockquote>
<br>
<a href="#" onclick="toggleClass('Projects');return false"> Projects </a>
<blockquote id="Projects" class='show'>
<li>Current</li>
<li>Past</li>
<li>Future</li>
<li>On-going</li>
</blockquote>
</body>
</html>
I am very new to this, so I appreciate everyone's help and patience I am displaying information on our company intranet. I want the user to be able to choice if they want to see the information sorted by person or by issue. Because of the way that this is setup, the info is not in a table and cannot be sorted. I want users to be able to view content either way, but with only one option being visible. This would require the OR operator combined with the toggle function (I assume), but I am pretty lost... This toggle below allows me to show/hide one on top of the other, but I want one to replace the other: <SCRIPT type=text/javascript> <!-- function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } //--> </SCRIPT> <P><STRONG><FONT color=#00467f size=3>Primary Contacts</FONT></STRONG></P> <P><A onclick="toggle_visibility('issue');" href="#">Toggle Contacts by Issue</A></P> <P> </P> <DIV style="DISPLAY: none" id=issue>%%Pages.Body PageID="596"%%</DIV> <DIV style="DISPLAY: block" id=pers>%%Pages.Body PageID="595"%%</DIV> Again, I really appreciate the help |
|||||||