|
JavaScript - Google Map Api Zoom / Center Around Markers ?
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 Similar TutorialsI 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>
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? 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! Fellow 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. 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 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>
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>
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? 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 am completely new to javascript programming. We had another company (out of business now) develop a mapping system that placed many different business locations on a Google map. However, the points overlap and hide each other. I would like the user to have to single click on the map (thus zooming the map in) before they can choose a business. Is there a simple line of code that will do this? I want to remove the need to double click to zoom and make it a single click to zoom prior to selecting a business. If you want to see the mapping code, I can post it. I wasn't sure what to do. This is a fairly pressing matter as the nonprofit I am helping out is seasonal and ready to start the busy season soon. THANKS! Hi i m using the below code to disable ctrl+ and ctrl- (zoom in/out using keyboard). The below code is working in firefox but it is not working in IE. The return false; is not working in IE. can you please some one help in this? $(document).ready(function() { var ctrlDown = false; var ctrlKey = 17, vKey = 189, cKey = 187; $(document).keydown(function(e) { if (e.keyCode == ctrlKey) ctrlDown = true; }).keyup(function(e) { if (e.keyCode == ctrlKey) ctrlDown = false; }); $(document).keydown(function(e) { //alert(ctrlDown); if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)) return false; }); }); Please provide me do you have any other code to do this? Thanks, Jagadeesh. 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'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! 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? The problem is I am drawing vml shapes on my webpage, at 100% everything is fine, click events works fine, mouseover also works fine, but when I zoom it to less than 90% or greater than 100%. Everything messess up. Click works, but away, like if there are 2 shapes together and I click on one, the other one will show the data. same with mouseover, I take the mouse over the shape, but before reaching the shape, it starts showing the effects of that mouseover. I tried to tackle this on window resize event. But it dont work. I wonder, If anyone has encountered this type of problem before & have a solution. I think this is done by Javascript. I have seen a website that has a great image zoom function and would like to be able to add this function to my website. I'm afraid my Javascript isn't very good. Could anyone tell me where I can get a script to do this or how else if there is some free software that could do it? The webpage is: http://www.next.co.uk/shopping/homew...roomdecor/17/4 On this page if you click on Zoom on the left another image comes up on the right and when you mouse over the square on the left image it zooms the right image. All help will is much appreciated Hello, I have been trying to make a script that will enlarge some images while the mouse passes over them.. though the script i wrote does not work.. Can someone please tell me what is wrong with it? What did i do wrong? Here is the script i wrote: Code: <script type="text/javascript" >
var img1 = "img1.jpg";
function zoomin()
{
document.getElementById('img1').style.height = 220;
document.getElementById('img1').style.width = 200;
}
function zoomout()
{
document.getElementById('img1').style.height = 60;
document.getElementById('img1').style.width = 50;
}
</script>
<img src="img1.jpg" id="img1" alt="" width="" height="" onMouseover="zoomin();" onMouseout="zoomout();"/>
Please help.. Thank you in advance. I have a page with a GoogleMap with a GoogleBar and I would like the GoogleBar to appear with something written in it already and to have that search executed. In other words, I would like to "write something to the GoogleBar and press Enter" automatically as soon as the map loads. How can I do this? btw: By GoogleBar, I mean the search bar that appears on the map after using the enableGoogleBar() function. Hi, I recently uploaded an interactive map which, for the most part, I'm happy with. However, I would like to add a zoom in/out function to the map; for example, when the mouse is scrolled the jpg zooms out. What exactly would be the code for that? Thanks Map can be viewed BY CLICKING HERE. |
|||||||