I am using the following code to show a jQuery UI dialog when the mouse is clicked on the map:
GEvent.addListener(map, "click", clicked);
function clicked(overlay, latlng) {
$('#dialog').show();
};
Both clicked function and show() function works fine on their own but when I want to open dialog box by clicking on the map it does not. Any ideas?
You may want to check out the following example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps jQuery UI Demo</title>
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"
type="text/javascript"></script>
<script src="jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 450px; height: 300px"></div>
<div id="dialog" title="Basic Dialog" style="display: none;">Dialog</div>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function(overlay, latlng) {
$('#dialog').dialog();
});
</script>
</body>
</html>
Screenshot:
alt text http://img517.imageshack.us/img517/643/jquerygoogle.png
Related
I want to add a googlemap to my html page using gmaps.js api. I put the gmaps.js file to same folder with my html page but when i try to load my html page nothing happens below is my code
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TaxiPolis|#Web-taxi</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" scr="gmaps.js"></script>
<link rel="stylesheet" type="text/css" href="web_taxi_css.css"/>
<script type="text/javascript" src="web_taxi_java.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
body{
width:100%;
height:100;
}
#map_canvas{
width:100%;
height:100%;
}
javascript:
$(document).ready(function() {
var map = new GMaps({
div: '#map_canvas',
lat: -12.043333,
lng: -77.028333
});
});
So when I test it on Google Chrome and IE I get the Error:
Uncaught ReferenceError: GMaps is not defined
Any ideas why this happening?
Thanks in Advance.
Your html has a typo:
Change
<script type="text/javascript" scr="gmaps.js"></script>
to
<script type="text/javascript" src="gmaps.js"></script>
The GMaps object does not exist. You have to use an object of the type google.maps.Map to load a map on your page.
This should be your javascript code:
$(document).ready(function() {
new google.maps.Map(document.getElementById('map_canvas'), {center: {lat:-12.04333, lng:-77.02833}});
});
A basic example can be found here.
I have to refresh one time the page to load the map.
You can actually have a look in the link below:
http://metartestmobile.netau.net/template/listview.html
When i move this line (
<script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script> )
But i wanna use that line..
Here's is the file listview.html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div data-role="page" id="my-page" >
<div data-role="content" data-theme="a">
<ul data-role="listview" data-inset="true" data-divider-theme="f">
<li data-role="list-divider">Weather</li>
<li data-icon="arrow-r"><a href="map.html" data-transition="flip" >Humidity-Rain</a></li>
</ul>
</div>
</div>
</body>
</html>
and the map.html
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="themes/Bootstrap.css">
<script type="text/javascript">
var infowindow;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(38.822590,24.653320);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div data-role="content">
<div id="map_canvas" ></div>
</div>
</body>
</html>
jquery mobile use ajax page load for default.
so change this
a href="map.html" data-transition="flip"
to
a href="map.html" data-transition="flip" rel="external"
then jquery mobile refresh hole page.
I have a script that opens a popup windows every time the page is loaded. The script is:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ColorBox demo</title>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</head>
<body>
<h1>Hello, there!</h1>
<h2>This is some content</h2>
<p>The popup will open in five seconds</p>
<div class="test">
<p>testtest</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"60%", height:"60%", href: "http://www.sitepoint.com"});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
It works fine, but if I use it with google maps, the popup windows resizes unexpectedly and the background color that surrounds the popup disappears. The code is:
<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"30%", height:"30%", href: "http://www.sitepoint.com"});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
I can't figure out why it won't display properly. Does anyone have an idea?
Thanks a lot!
I'm not sure about that api colorbox but I would go with the jQuery ui modal and just customize the look from there. Run this code below. Note: I added the reference to the jQuery ui css and code base. Then I append a new div to the body with an iframe in it then call the dialog method on that element. Hope this helps.
<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }
</style>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas">
</div>
<script>
function openColorBox(){
$('body').append("<div id='modalBox'><iframe style='height:300px; width:350px;' src='http://www.sitepoint.com'></iframe></div>");
$('#modalBox').dialog({
height:400,
width: 400
});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
I have 2 javascripts registered to a page. One being for google maps api and the other being the initialization function to get the map loaded and created. Now whichever one I put first will successfully work, but whichever I put second will not load properly. So If i put the googleapi first, firebug will tell me initialize doesn't exist and vise versa. So how can i get both to be loaded successfully. Below is the page and JS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" />
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(43.652073, -79.382293);
var myOptions = {
zoom: 8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
<asp:ContentPlaceHolder ID="Header" runat="server">
<ucHead:UC_Header runat="server" ID="UC_Header" />
</asp:ContentPlaceHolder>
</head>
<body onload="initialize()">
<div class="sidePanel">
<ucMenu:UC_Menu runat="server" ID="UC_Menu" />
</div>
<div class="mainContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</body>
</html>
You must close your script tags...
You cannot do this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" />
It must look like this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" ></script>
You need a </script> tag after the googleapis.com script tag.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" /></script>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
function GetMap()
{
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials: "Your Bing Maps Key",
center: new Microsoft.Maps.Location(45.5, -122.5),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 7});
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
I've tried even loading a simlple map but I get a js error on the Microsoft class undefined
Add the following line to the <head> section of your page, before the section that you've pasted above:
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"
charset="UTF-8"></script>
Have you included the include for the maps api?
<script type="text/javascript" src="bingmaps.js"></script>
Or are you using the rest service, in which case you need to specify the location of the service in an AJAX call...
http://www.earthware.co.uk/blog/index.php/2010/10/using-jquery-with-the-bing-maps-rest-api/