I'm trying to implement a basic image map of my own. But I got error with my code. It runs into error on the line I highlighted (with **). The map fallbacks to default roadmap. The error message is just "Error" and I have no clue what is going on.
Can you please help look into it?
Many thanks!
My javascript code:
<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="https://maps.googleapis.com/maps/api/js?key=my-api-key&sensor=true">
</script>
<script>
// custom map type
var mapTypeOptions = {
getTileUrl: function(coord, zoom) {
return 'http://http://placehold.it/256x256.gif';
},
tileSize: new google.maps.Size(256, 256),
name: 'Some Place',
};
var customMapType = new google.maps.ImageMapType(mapTypeOptions);
// initalize function
function initialize() {
// try to create a new map with custom map type
var mapOptions = {
center: new google.maps.LatLng(22.33173, 114.16061),
zoom: 17,
minZoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
map.mapTypes.set('ssp', customMapType); // ****
map.setMapTypeId('ssp');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Looks like your missing a config setting
mapTypeControlOptions: {
mapTypeIds: ["ssp"]
}
Also, you need to define maxzoom for mapTypeOptions.
See the example: https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
You've also got some validation errors, remove trailing commas before closing an object.
Related
I'm trying to create a map and load .kmz file using the following code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8">
<style type ="text/css"> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px}</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=mykey"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(58.33, -98.52),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var kmzLayer = new google.maps.KmlLayer('link_to_kmz_file');
kmzLayer.setMap(map);
}
</script>
</head
<body>
<div id="map_canvas"> </div>
</body
</html>
The problem comes up when nothing is loaded and I have no idea why it happens. I should mention my API_KEY is valid, since I use it for creating another maps that does not require .kmz file loading, and I also do not store the .kmz file on localhost but on my own server.
I'd appreciate it if anyone could point me to the solution.
Thanks in advance.
In your HTML, you are using:
<div id="map_canvas"></div>
and in your CSS:
#map-canvas {
...
}
Issue: map-canvas ≠ map_canvas
Since the map needs a height to be displayed, your map won't show until you correct your CSS like hereafter:
#map_canvas {
...
}
+ You need to correct your closing </head> and </body> tags.
+ You need to call the initialize() function.
Add this to your javascript:
google.maps.event.addDomListener(window, 'load', initialize);
you aren't calling initialize() anywhere, just declaring it. Add it to the body onload if you want to call it when body loaded.
<body onload="initialize()">
also your closing body tag is incomplete
</body>
and your closing head tag
</head>
add after your function like this
`<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(58.33, -98.52),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var kmzLayer = new google.maps.KmlLayer('link_to_kmz_file');
kmzLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>`
Try this
google.maps.event.addDomListener(window, 'load', initialize);
I have a website here : www.hosting6280514.az.pl/ that uses SSL ... I try to display google maps on that page, but only the controls, markers and map/satellite switch is displayed, the actual map isn't. This is the code I'm using:
<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;
function refreshing() {
setTimeout("location.reload(true);",5000);
}
function initialize()
{
var position = new google.maps.LatLng(<?php echo$lat; ?>,<?php echo$lgt; ?>);
var mapOptions =
{
zoom: 18,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
/*var image = new google.maps.MarkerImage('http://hosting6280514.az.pl/pawel/images/car.png',
// This marker is 129 pixels wide by 42 pixels tall.
new google.maps.Size(129, 42),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(18, 42)
);*/
var marker = new google.maps.Marker(
{
position: position, // its position is where position variable points
title: "Car's position"
//icon: image
});
marker.setMap(map); // To add the marker to the map, call setMap();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="JavaScript:refreshing();">
<div id="map-canvas"></div>
</body>
</html>
Sorry, Question is: does anyone know why map is not displaying ?
In order to update the position on the map, try something along those lines.
You may also use geolocation.watchPosition if you would like to get the current position.
var position, marker;
function updateLocation() {
$.ajax({
url: '/something.php',
dataType: 'JSON',
success: function(data) {
position = new google.maps.LatLng(data.lat, data.lng);
marker.setPosition(position);
}
});
}
function initialize() {
position = // same as you have it
// ...
marker = // same as you have it
}
I was trying to simplify the way I add Google maps to my pages.
I'm using this markup for each map:
<div class="map" data-coordinates="-34.397, 150.644">
<div class="canvas" id="map_canvas"></div>
</div>
and this jquery code:
jQuery(function($) {
var maps = $('.map');
maps.each(function() {
var $this = $(this),
mapId = $this.find('.canvas').attr('id'),
coordinates= $this.data('coordinates');
// set map options
var mapOptions = {
center: new google.maps.LatLng(coordinates),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(document.getElementById(mapId), mapOptions);
});
});
this is a recreation of the tutorial on the google maps website.
when I do it like the tutorial it works fine, but when I use my code above I get the map controls with a grey background, I also tried jQuery(window).load(); with the same result, and the issue seems to be from each() because when I create the map without it, it works fine.
this is the code that works:
<!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="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
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"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
There's a problem with coordonates.
google.maps.LatLng() accepts Lat and Lng as separate params, not a composite string.
Try :
jQuery(function($) {
$('.map').each(function() {
var $this = $(this),
canvas = $this.find('.canvas').get(0),
coordinates = $this.data('coordinates').split(/,\s?/);
// set map options
var mapOptions = {
center: new google.maps.LatLng(Number(coordinates[0]), Number(coordinates[1])),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(canvas, mapOptions);
});
});
You might need to test that regexp.
I'm having a stupid hard time with this google maps javascript code. I want to get the return of the radius of a circle that is produced on google maps. Google API offers the code but I have no idea where to put it. I've tried everywhere. Here is the code below. What did I do wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 50% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false&libraries=drawing">
</script>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(33.65, -84.42),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE
]
},
circleOptions: {
fillColor: '#01939A',
fillOpacity: .4,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, 'load',
initialize).addListener(drawingManager, 'circlecomplete', function(circle)
{
var radius = circle.getRadius();
});
</script>
</head>
<body>
<script type="text/javascript" >
alert(radius);
</script>
<div id="map_canvas"></div>
</body>
</html>
You seem to have a few flow problems here. Trying to use the drawingManager variable, which is bound by the initialize function.
Here: http://jsfiddle.net/RN3QL/ - I've moved the binding of the circle complete function to within the initialize function, and stitched up a few smaller flow issues.
I am trying to render multiple custom markers on a page using web2py's
framework and my map will not render. Using chrome's debugger, I see
two errors, one says "Uncaught SyntaxError: Unexpected token <" and
the second one says "Uncaught ReferenceError: initialize is not
defined". I would appreciate help in determining what I am doing
wrong.
Here is the link to my site http://roamweb.sanren.ac.za/ .
A copy of my code is pasted below.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<!-- <style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style> -->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3key={{=GOOGLEMAP_KEY}}&sensor=false">
</script>
<script type="text/javascript"> <![CDATA[
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-28.401065, 25.312500),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),options);
function createMarker(point, i, message) {
if(i==0) google.maps.MarkerOptions = {
{{for row in rows:}}{{if row.latitude and row.longitude:}}
var point = new google.maps.LatLng({{=row.latitude}},{{=row.longitude}});
var message = '{{=str(row.plugin_gmap_popup).replace("'","\\'")}}'
var myicon = new google.maps.MarkerImage('http://roamweb.sanren.ac.za/db/static/Icon-wifi.png', null, null, new google.maps.Point(9,34), new google.maps.Size(37,34));
var marker = new google.maps.Marker({
position: point;
icon: myicon;
title: 'click me for info';
)};
};
else google.maps.MarkerOptions = {};
var infoWindow = new google.maps.InfoWindow({
content:message
)};
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker)
});
marker.setMap(map);
};
createMarker(point, 0, message);
{{pass}}{{pass}}
}
]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: {{=width}}px; height:{{=height}}px"></div>
</body>
</html>
try correcting CDATA with
<script type="text/javascript">
//<![CDATA[
...
//]]>
</script>