I have a written a simple code which would display the location on the google map. But for some reasons its not showing up. Any idea whats happening?
<html>
<head>
<title>Google Maps </title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
(function() {
window.onload = function(){
var latlng = new google.maps.LatLng(57.8, 14.0);
var options = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
}
})();
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
You need to set dimensions for your map container, try this:
<style type="text/css">
#map {
width: 500px;
height: 500px;
}
</style>
Related
I want an infowindow to open automatically when this map is loaded. I'm trying to apply the very fine answer here, the only difference I can see being that I'm triggering a click on a marker rather than on a polygon. I've been staring at and fiddling with the code for a while but just can't get it to trigger that click. What am I missing?
Thanks,
Drew
This pared-down version is using a KML file with one placemark. The relevant code for the event.trigger is down at line 33.
<!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"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDDFrP7MSD1ieFEvaF95BRlwHa0S72Fy1s&sensor=FALSE"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(47.606209, -122.332069)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions );
var blues = new geoXML3.parser({map: map, zoom: false});
blues.parse('allbluesdance_seattle.kml');
google.maps.event.addListenerOnce(map, 'idle', function(){
alert("Clicking now.");
google.maps.event.trigger(geoXml.docs[0].placemarks[0].marker,'click')
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
You have a javascript error in your code: Uncaught ReferenceError: geoXml is not defined (because geoXml is undefined). That should be blues in your code.
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(47.606209, -122.332069)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var blues = new geoXML3.parser({
map: map,
zoom: false
});
blues.parse('allbluesdance_seattle.kml');
google.maps.event.addListenerOnce(map, 'idle', function () {
alert("Clicking now.");
google.maps.event.trigger(blues.docs[0].placemarks[0].marker, 'click');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
I am using Google maps JavaScript API, i get users zip code from database, find lang, lat for it from another table, pass it to JavaScript and show marker on the map.this is showing marker perfectly.
But i want to show marker on exact address of the user instead of just zip code.
But unable to find a way how to do this.
Can anybody please guide me.
Thanks
if you want to place the marker on given lat and lng use this code,
use this code
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var markersArray=[];
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(11.6667,76.2667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function pan() {
deleteOverlays();
var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.setCenter(panPoint)
var marker = new google.maps.Marker({
map: map,
position: panPoint,
});
markersArray.push(marker);
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body>
Latitude:<input type="text" id="lat" >
Longitude:<input type="text" id="lng">
<input type="button" value="updateCenter" onclick="pan()" />
<div id="map-canvas"></div>
</body>
</html>
I prepared a simple page by using the data of a fusion table. ( FusionTablesLayer with Google Maps JavaScript API v3 ) but the map is not displayed. You can see the page here: http://www.siterary.com/0test.html . What's the problem ? The code is as below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>test</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBK_ErFIm-CYBsslK_9ZB6m0wPV197UaJg&sensor=false"></script>
<script>
function initialize() {
var istanbul = new google.maps.LatLng(41.01, 28.97);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: istanbul,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location' ,
from: '1s3DYRvmNAfKgo-swjG39-8UEb9tHMm0UPHvW_tc'
}
});
layer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<B>MAP</B> <BR>
<div id="map_canvas"></div>
</body>
</html>
The file "/maps/documentation/javascript/examples/default.css" doesn't exist on your site. Your map doesn't have a valid size.
Working version
code snippet:
function initialize() {
var istanbul = new google.maps.LatLng(41.01, 28.97);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: istanbul,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '1s3DYRvmNAfKgo-swjG39-8UEb9tHMm0UPHvW_tc'
}
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
#media print {
html,
body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<B>MAP</B>
<BR>
<div id="map_canvas"></div>
My application will not recognize my KML file. The application will go to the correct location (lat/long) and zoom level, but will not recognize the KML file location. I have attempted to use two different servers to check the problem, so I believe it is the code that is the problem.
<!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=AIzaSyDOJCBv2WGJRJ7uxOyAMehKAMiAKXkkHFU&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(44.88119,-93.314798),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var nyLayer = new google.maps.KmlLayer('http://webgis.uwm.edu/engelki7/KMLFiles/Richfield_Homes2.kml',{suppressInfoWindows: true});
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInDiv(text);
});
}
function showInDiv(text) {
var sidediv = document.getElementById('content_window');
sidediv.innerHTML = text;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:79%; height:100%; float:left"></div>
<div id="content_window" style="width:19%; height:100%; float:left"></div>
</body>
</html>
Your kml file does not exist.
http://webgis.uwm.edu/engelki7/KMLFiles/Richfield_Homes2.kml
Gives me: HTTP Error 404 - File or directory not found
If you believe it is there (the path on the server is correct), then it is possible that the server doesn't know how to deal with kml/kmz files. See this portion of the documentation on kml files.
I test a new drawing library and has led me to question how to get from drawing manager polyline position and set another markers? As in this example: polyline-complex.
My example:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<style type="text/css">
#map, html, body {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(52.000, 16.000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYLINE,
drawingControl: false,
polylineOptions: {
editable: true
},
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>