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>
Related
i'm tring to create an html file whith google API to display on google MAPS a KML File.
this is the HTML Code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
//center: {lat: 41.919, lng: 12.493}
center: {lat: 41.876, lng: -87.624}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'file://///MYSERVER/test/LIME.kml',
//url:'http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml',
map: map
});
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
> <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<div id="map"></div>
<script>
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDhqMRJ2JhGTThtp_eSvVuvP_ackvhmOEE&callback=initMap">
</script>
</body>
</html>
when i launch the html, the google maps start but my kml is not visualized.
Help!!
Thanks in advance Vincenzo
Your KML file must be accessible on the public Internet - that is, it must be accessible to any machine which is connected to the internet.Make sure your kml file is publicly accessible
I am working with Google Maps and I want to load the map in an external file, where I can use jQuery to set up the rest of the page.
I have made three changes to the Hello World example: I've included jQuery, I've initialised the map in an external file, and I've removed the onload event in the <body> tag. And I now have a blank screen where there used to be a map, and no console errors to give me a clue.
This is my HTML:
<!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 src="./js/jquery.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true">
<script src="./js/maps.js"></script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
This is maps.js in full:
$(document).ready(function () {
console.log('document ready');
function initializeMap() {
console.log('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);
}
initializeMap();
});
I don't see any of the console statements. I also don't see a map - just a blank screen.
I must be doing something stupid, but what is it?
You're missing an </script> after src="http://maps.googleapis.com/maps/api/js?sensor=true">
In this google map sample: http://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
If the user dropped the little guy far away in the middle of the ocean for example, it disappears.
But in the main google map website http://maps.google.com/ If you made it show the street view, and the user dragged the guy away it get back automatically to the previous point.
What is missed in the first example to make it behave the same as the google map website?
here is the code of the sample:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Layer</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
To do this, add an event listener to position_changed and use it to store the last (valid) location that pegman was dropped.
google.maps.event.addListener(panorama, 'position_changed', function() {
// Store position
});
And then add an event listener to visibility_changed (which is triggered when pegman is dropped in the ocean) to set him back to the last known location:
google.maps.event.addListener(panorama, 'visible_changed', function() {
if (panorama.getVisible() == false && last_location) {
panorama.setPosition(last_location);
}
});
I can't seem to figure out how to attach a click event to a Google map, is it only possible to do so on the marker? This doesn't seem to do anything:
google.maps.event.addListener(map, 'click', function() {
console.log('clicked');
});
I've also tried using jQuery, but that catches two events, I'm guessing something to do with overlays:
EDIT: some idiot initiated the map twice, and attached the event in the same function, hence two events. jQuery works just as well, and in fact can handle more events.
$('#placeholder').click(function() {console.log('clicked');});
Am I missing something?
Your code works for me. try (Ctrl + F5) to reload page without cache.
<!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"/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<title>Google Maps Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function () {
console.log('clicked');
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Maybe your map name is incorrect? Show us your entire code.
Here's an example of attaching a click event handler to a map
http://jsfiddle.net/galen/EXRSD/
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>