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>
Related
I am running into this issue while trying to implement a google map for the site that I am maintaining. I am getting the following error from firebug:
TypeError: map is undefined
What did I do wrong?
Note: We just change the domain last week.
Thank you
<div id="mapd" style="width: 100%; height: 550px;"></div>
<script src="https://maps-api-ssl.google.com/maps/api/js?key=mykey&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
var markers = [];
var markers1 = [];
var infoWindow;
function load1() {
map = new google.maps.Map(document.getElementById("mapd"), {
center: new google.maps.LatLng(22.00, 72.22),
zoom: 8,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'dragend', function(ev){
var s = $("#searchcheck").is(':checked');
if(s==true)
{
$('#loading').css('display','block');
$('#loading1').css('display','block');
searchLocationsNear(map.getCenter());
}
});
}
The reason is you haven't added your google map api key in the library. you can find with key word 'myKey' in library.
Get google api key Here
replace "myKey" with the key google provided.
Try again.
Try This Code.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<div id="mapd" style=" width: 100%;
height: 550px;
position: absolute;
z-index: 11;float: inherit;
display: block;"></div>
<script type="text/javascript">
var map;
var markers = [];
var markers1 = [];
var infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById("mapd"), {
center: new google.maps.LatLng(22.00, 72.22),
zoom: 8,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'dragend', function(ev){
var s = $("#searchcheck").is(':checked');
if(s==true)
{
$('#loading').css('display','block');
$('#loading1').css('display','block');
searchLocationsNear(map.getCenter());
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1TwYksj1uQg1V_5yPUZqwqYYtUIvidrY&callback=initMap"
async defer></script>
</body>
</html>
I have some working code to display a KML layer on Google maps. When you click on the various parts of the layer their respective name pops up in an info window.
<!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"
// Load Google Maps API
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(51.875696, -0.624207);
var mapOptions = {
zoom: 6,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var kmlLayer = new google.maps.KmlLayer({
url: 'http://XXXXXXX.org/gliding/grid3.kml',
suppressInfoWindows: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.name;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:100%; height:100%; float:left"></div>
</body>
</html>
I would like the info window to also contain a link to a page with the same name as object clicked on. For example if the user clicks on a shape in the KML layer called Tom the info window says Tom Click Here. If the user clicks the link they are taken to www.XYZ.com/Tom.
I'm sure this is quite simple, but I'm new to javascript and can't get it to work.
This is more a hack than a solution (which means google could change a property name and this would stop working.
However, here you go
google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.name;
kmlEvent.featureData.infoWindowHtml += 'Click Here';
showInContentWindow(text);
});
I am new to google maps api and am using it to put a map on my wordpress page and get the location of the user. So far, I have kept the following code in my header.php file with myapikey replaced with my actual api key.
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=places&key=myapikey"></script>
I also have a wordpress page with the following code. This code works when I keep it on a html file. However, when I put this code on my wordpress page, I don't even get the map to show. I am using Google Maps API v3 Geolocation. Could someone please help me.
<!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: 0 }
#map-canvas { height: 100%; width: 100%; top: -100px;}
</style>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
//Html five geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: "HTML5 is used."
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
You can't paste the complete document into the editor, what you put into the editor is expected to be te content of your page, it may be almost anything that you would put into the of a HTML-page(no html, head and body).
script and style always include either via the header/footer of the theme or via a plugin.
I am working on HTML5 and javascript. and i am developing an application which finds the user's location using google map and the i am trying to add a click event on the user's location so that when they click they click the message "click here" they must be directed to a new html page. any help or idea would be appreciated.
and here is my code :
<!DOCTYPE html>
<html>
<head>
<title>Getting Geolocation for Weather Details</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
#media print {
html, body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'click here'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Does this help?
Replace text with an anchor tag.
use content : '<a href="https://www.google.com">click here<a>' in place of content : 'click here' as in -
var infowindow = new google.maps.InfoWindow({
map : map,
position : pos,
content : '<a href="https://www.google.com">click here<a>'
});
In your case you can put your page link in place of https://www.google.com.
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.