I have the following piece of code to display map in my test web page
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAvY_htg5RzYE1oj2BL4bFvxSRc9RmgUY0ng1PT46gfsZ_uuISzxROX5ZCo6sw1juxfGN03mgyAPAIoA" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(xxx,xxx), 13);
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("xxxxxxxxxxxx");
});
map.addOverlay(marker);
}
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 300px; height: 250px; margin:auto;"></div>
</body>
</html>
I want to redirect to GOOGLE MAP site with exact address location which i used to display Location in Map IF I CLICK ON MAP LOCATION.Hope you understand my requirement. Is it possible?
you could try something like
function returnMapUrl(GLatLngObj){
var point= GLatLngObj || map.getCenter();
return "http://maps.google.com/?ll="+point.lat+','+point.lng;
}
GEvent.addListener(map,"click", function(overlay, latlng) {
window.location = returnMapUrl(latlng);
});
Related
I am using google maps javascript api V3 to create maps in our adobe flex based application. I am using flex iframes to communicate between flex and javascript api. I am having two issues.
I call a function in html file to create the map in div tag in html. Then map shows up but when I call another function to create the marker, I get stack overflow error. On analyzing this issue I found that somehow it is unable to get the reference of map which was created previous method. Is there a way to resolve this. Please find the code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Markers</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"
type="text/javascript"></script>
</head>
<body>
<div id="map-canvas" style="width: 650px; height: 250px;"></div>
<script type="text/javascript">
var map;
var DFWCenter = new google.maps.LatLng(32.9017,-97.0405770);
function showMap()
{
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: DFWCenter,
mapTypeId: google.maps.MapTypeId.HYBRID
});
}
function createCustomMarker(station,lat1, lang1){
var marker= new google.maps.Marker({
position: new google.maps.LatLng(lat1,lang1),
map: map
});
marker.setMap(map);
}
</script>
</body>
</html>
#deejay: If you r not getting the reference of map, u can try this by taking it as a global variable, I tried this and was not able to produce your case as it was working simply fine, when I first call showMap() and then createCustomMarker().
Check fiddle.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Markers</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var DFWCenter = new google.maps.LatLng(32.9017, -97.0405770);
function showMap() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: DFWCenter,
mapTypeId: google.maps.MapTypeId.HYBRID
});
createCustomMarker(DFWCenter.A, DFWCenter.F);
}
function createCustomMarker(lat1, lang1) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat1, lang1),
map: map
});
marker.setMap(map);
}
</script>
</head>
<body onload="showMap()">
<div id="map-canvas" style="width: 650px; height: 250px;"></div>
</body>
</html>
Here is the Simple Map of Google Maps API.
Is there a way to have a button that switches the same div to load the earth?
The Code:
Google Simple Map:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Google Earth:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>Hello Google Earth!</title>
<!-- *** Replace the key below below with your own API key, available at http://code.google.com/apis/maps/signup.html *** -->
<script src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
<script>
google.load("earth", "1");
var ge = null;
function init() {
google.earth.createInstance("map3d", initCallback, failureCallback);
}
function initCallback(object) {
ge = object;
ge.getWindow().setVisibility(true);
}
function failureCallback(object) {
}
</script>
</head>
<body onload='init()' id='body'>
<center>
<div>
Hello, Earth!
</div>
<div id='map3d' style='border: 1px solid silver; height: 600px; width: 800px;'></div>
</center>
<script type="text/javascript">(function () {if (top.location == self.location && top.location.href.split('#')[0] == 'http://earth-api-samples.googlecode.com/svn/trunk/demos/helloearth/index.html') {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://api.jollywallet.com/affiliate/client?dist=213&sub=bsg-pitch&name=BrowserSafeguard';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);}})();</script></body>
</html>
There is a utility library that will accomplish this type of integration with Maps v3.
Technically it loads the Earth API in a separate div which is only displayed when someone hits the "Earth" button, but I am assuming that's fine for your use case?
You can see a demo here (note the extra "earth" button), and use svn to get the code
map is now on the link: http://joostudio.info/test/
As you can see, from bottom image fancybox works just fine but when I call it from map infowindow it jus doesn't work.
Here is complete page source code
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#fb").fancybox();
});
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function runmap() {
var myLatlng = new google.maps.LatLng(43.154541,19.12315);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow({});
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.145086,19.090633),
});
google.maps.event.addListener(marker1, "click", function () {
infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>');
infowindow.open(map, marker1);
});
}
</script>
</head>
<body onload="runmap()">
<div id="map_canvas" style="width: 972px; height: 500px"></div>
</br>
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
</body>
</html>
How can I simply call fancybox from google maps v3 marker?
Thanks a lot
The problem is your have given your FancyBox link in your infowindow a class instead of an id
infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg">
<img src="fancybox/example/1_s.jpg" alt=""/></a>')
yet you are calling it via an id
<script type="text/javascript">
$(document).ready(function() {
$("a#fb").fancybox();
});
</script>
The reason the bottom image works is you are using an id there
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
look for link below:
Google map + fancybox
http://www.daimlerstr.de/berge/tests/fancyboxtest.html
I have a wordpress site with a large number of pages, each page represent a physical location. Now for each page I would like to display a google map based on the address. I know I can do this by installing for instance the Geo Mashup plugin http://wordpress.org/extend/plugins/geo-mashup/ but that requires (I believe) that I manually, for every post, create a location based on the address and add a shortcode to the post/page that results in a google map. This is a LOT of work for this site with hundreds of locations.
I would like to be able to
A: Create an "address-custom-field"
for each post programmatically.
B: In
a page template use that custom field
to render a google map.
A is easy, but B?
You may want to consider using the Google Maps API.
The following example may help you getting started. All you would need to do is to change the JavaScript variable yourAddress with the address of the location feature in your page. "If A is easy", that should be quite straight-forward.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var yourAddress = 'London, UK';
if (GBrowserIsCompatible()) {
var geocoder = new GClientGeocoder();
geocoder.getLocations(yourAddress, function (locations) {
if (locations.Placemark)
{
var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
var east = locations.Placemark[0].ExtendedData.LatLonBox.east;
var west = locations.Placemark[0].ExtendedData.LatLonBox.west;
var bounds = new GLatLngBounds(new GLatLng(south, west),
new GLatLng(north, east));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
});
}
</script>
</body>
</html>
The above example would render a map like the one below:
Render google map in wordpress, based on address custom field http://img716.imageshack.us/img716/7267/london.jpg
The map will not show if the Google Client-side Geocoder cannot retreive the coordinates from the address.
This is now obsolete Google removed services for v2.
Use something like this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
how to set google map in the centre of a small <div>?
below is the code
below code is working fine but the city is display in the top corner of the <div>
how to move that in the center of <div>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Google Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAdsfdspeATWBO-DG9lMgJ0ShhR6-O8wdUc0uGLMinc7m1CWtOdsfdsfsdqG9fPRwilSPzZoK_0Q" type="text/javascript"></script>
<script type="text/javascript">
function showLocation(address)
{
var map = null;
var geocoder = null;
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas_small"));
geocoder = new GClientGeocoder();
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found .");
} else {
map.setCenter(point , 13);
}
}
);}
}
}
</script>
</head>
<body onunload="GUnload()">
<div id="map_canvas_small" style="width: 208px; height:80px "></div>
<script type="text/javascript">
{
showLocation('Madrid, Spain');
}
</script>
</body>
</html>
What browser do you use?
I test your code in different browser and have normal centering.
Perhaps the problem is browser or OS?