I have what I think is a tricky question, but hopefully someone on here can keep me from tearing my hair out!
I’m currently trying to figure out how to overlay a bunch of markers on a google map overlaid with a hosted tileJson layer.
I’m also trying to follow this tutorial so that I can load pictures and text into the sidebar when the user clicks on any of the map points:
The tutorial is designed for maps api2 (I’m using 3) although it looks like it could easily be updated for api 3.
Right now, in part because of the javascript connector that simplifies importing the custom tiles, I can’t seem to get markers to work, let alone connect them to databases, and access them from outside the map window.
https://mywebspace.wisc.edu/axler/Web%20Deep%20Map/Web%20Map%20Google%20Maps/index2.html
Live map tiles… at the above link. No points are working yet but I put some sample points in a list in the code.
Any suggestions? Here is my code.
<html>
<head>
<title>GOOGLE MAPS TILEMILL</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD6VG2UbuMLDCQoZ-GOPZl_PU7r1jXzejU&sensor=false">
</script>
<script
src='wax/dist/wax.g.min.js'
type='text/javascript'></script>
<link href='wax/theme/controls.css' rel='stylesheet' type='text/css' />
<link href='style.css' rel = 'stylesheet' type ='text/css' />
<link href='controls.css' rel = 'stylesheet' type = 'text/css' /><script>
var map;
var sidebar;
function pageLoad() {
sidebar = document.getElementById('sidebar');
addPoint(1, 'Howards Fish House', 46.72.30616121527788, -92.15);
addPoint(2, 'Rices Point', 46.78, -92.18);
addPoint(3, 'Wild Rice Seeding Area', 46.80, -92.22);
wax.tilejson('http://a.tiles.mapbox.com/v3/slre.st-louis-river-estuary.jsonp',
function(tilejson) {
var map = new google.maps.Map(
document.getElementById('mymap'), {
center: new google.maps.LatLng(46.72, -92.15),
disableDefaultUI: false,
zoom: 12,
panControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP });
// Use this code to set a new layer as a baselayer -
// which means that it'll be on the bottom of any other
// layers and you won't see Google tiles
map.mapTypes.set('mb', new wax.g.connector(tilejson));
map.setMapTypeId('mb');
//I want to place a number of points on top of the MapBox hosted tile layer that is specified by wax.tilejson
});
}
function addPoint(pid, name, lat, lng) {
var point = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker(point);
map.setMap(marker);
var info = '<strong>' + name + '</strong><br />';
info += 'For more information, click the icon.';
google.maps.event.addListener(marker, 'mouseover', function() {
marker.openInfoWindow(info);
});
google.maps.event.addListener(marker, 'mouseout', function() {
map.closeInfoWindow();
});
google.maps.event.addListener(marker, 'click', function() {
details.innerHTML = '<em>Loading information ...</em>';
showDivInfo(pid);
});
}
</script>
</head>
<body onload="pageLoad()" onunload="pageUnload()">
<div id='sidebar'>
<h2>Explore the St. Louis River Estuary</h2>
<p>Click on the map points to learn about the stories and science that define the region!</p>
<p><span class='source'>Source: <a href='http://www.stlre.pebbleonline.com'>Main Web Page</a></span></p>
</div>
<div id='mymap'></div>
</body>
</html>
This map.setMap(marker); looks wrong.
should be
🙂