My code (Google Maps API 3 JS) here does just what I want.
Except that each InfoWindow's content is much bigger than this. (And there will be 30 of them!)
So I need to be able to set my own positions for each InfoWindow.
I've spent about 12 hours trying every combination I can think of in the code that follows.
Anyone any ideas what I'm doing wrong, please: I suspect it has to do with (the relationship between):
position: winLatLng
in my creation of the infowindow object and how I call it with:
infowindow.open(map,this);
Ideally, I'd like to use the 5th and 6th elements of the array into winLatLng. But nothing I can do works.
Thanks so much for anyone who has the time to suggest a way to do this!
Full code follows:
<!DOCTYPE html>
<html>
<head>
<title>Foundation 30 Year Anniversary Maps Prototype</title>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
width: 900px;
height: 700px;
}
</style>
</head>
<body>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?">
</script>
<script type="text/javascript">
var infowindow = null;
var MY_MAPTYPE_ID = 'custom_style';
$(document).ready(function () { initialize(); });
function initialize() {
google.maps.Map.prototype.setCenterWithOffset= function(LatLng, offsetX, offsetY) {
var map = this;
var ov = new google.maps.OverlayView();
ov.onAdd = function() {
var proj = this.getProjection();
var aPoint = proj.fromLatLngToContainerPixel(LatLng);
aPoint.x = aPoint.x+offsetX;
aPoint.y = aPoint.y+offsetY;
map.setCenter(proj.fromContainerPixelToLatLng(aPoint));
};
ov.draw = function() {};
ov.setMap(this);
};
var featureOpts = [{
"featureType": "administrative",
"stylers": [
{ "color": "#848080" },
{ "weight": 0.1 }
] },
{
"featureType": "administrative.country",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]},{
"featureType": "water",
"stylers": [
{ "color": "#C3C3C6"}
] },{
"featureType": "landscape.natural",
"stylers": [
{ "color": "#F0F0F0"}
] },{
}
]
google.maps.visualRefresh=true;
var myLatlng = new google.maps.LatLng(51.30, 0.7);
var centerMap = new google.maps.LatLng(51.30, 0.7);
var mapOptions = {
zoom: 2,
disableDefaultUI: true,
center: centerMap,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
var styledMapOptions = {
name: 'Custom Style'
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setCenterWithOffset(myLatlng, 50, 225);
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
setMarkers(map, sites);
var winLatLng;
infowindow = new google.maps.InfoWindow({
disableAutoPan : true,
position: winLatLng
});
};
var losangelescontentString = 'Los Angeles content';
var portonovocontentstring = 'Porto Novo content';
var florencecontentstring = 'Florence content';
var shackletoncontentstring= 'Shackleton content';
var sites = [
['Los Angeles', 34.054082,-118.24261, losangelescontentString,-17,30],
['Porto Novo', 6.501411,2.604275, portonovocontentstring,-54.054082,0],
['Shackleton', -77.550000, 166.150000, shackletoncontentstring,0,0],
['Florence', 43.773046,11.255901, florencecontentstring,-10,18]
];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var winLatLng = new google.maps.LatLng(sites[4], sites[5]);
var marker = new google.maps.Marker({
title: sites[0],
position: siteLatLng,
html: sites[3],
map: map
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
}
}
</script>
<div id="map_canvas"></div>
</body>
</html>
If you use the google.maps.InfoWindow.open(map, marker) syntax it positions the infowindow relative to the marker. If you don't want that, use the google.maps.InfoWindow.open(map) after calling google.maps.InfoWindow.setPosition(desiredPosition).
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.setPosition(winLatLng);
infowindow.open(map);
});
Although, since you aren't using function closure, you may want to set winLatLng as a property of the marker, then use it in the click listener like this:
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var winLatLng = new google.maps.LatLng(sites[4], sites[5]);
var marker = new google.maps.Marker({
title: sites[0],
position: siteLatLng,
html: sites[3],
winLatLng: winLatLng,
map: map
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.setPosition(this.winLatLng);
infowindow.open(map);
});
}
}
working fiddle
Related
I am new to google map. I need an help to implement pagination for the table content inside infowindow while clicking marker.
Here is my code :
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['table']});
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var mapInfos = [];
var infoWindowView = new google.maps.InfoWindow;
function initialize()
{
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom:5,
center: new google.maps.LatLng(49.072086992455475,-5.05078125),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker=new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
function mapInfoTable(container)
{
this.tableContainer = container;
var me = this;
var cssClass = {rowNumberCell: 'rowNumberCellClass'};
this.dT = new google.visualization.DataTable();
this.dT.addColumn("string", "Name");
this.dT.addColumn("string", "City");
this.populateTable = function()
{
this.dT.addRows([
['A1' ,'C1'],
['A2' ,'C2'],
['A3' ,'C3'],
['A4' ,'C4'],
['A5' ,'C5'],
['A6' ,'C6'],
['A7' ,'C7'],
['A8' ,'C8']
]);
this.draw();
}
this.table = new google.visualization.Table(document.getElementById(this.tableContainer));
this.draw = function()
{
this.table.draw(this.dT, {allowHtml: true, showRowNumber: true, cssClassNames: cssClass, page: 'enable', pageSize : 4, pagingSymbols: {prev: 'Previous',next: 'Next'}});
}
}
google.maps.event.addListener(marker, 'click', function(e) {
var InfoTab = new mapInfoTable('TableInfo');
InfoTab.populateTable(mapInfos);
var content = document.getElementById("TableInfo").innerHTML;
infoWindowView.setContent(content);
infoWindowView.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="mapCanvas" style="width:800px;height:500px"></div>
<div id="TableInfo" style="position:fixed;"></div>
</body>
</html>
Please let me know where the problem lies.
You need to wait for the 'domready' event on the infowindow before populating the table.
proof of concept fiddle
code snippet:
google.load('visualization', '1', {
'packages': ['table']
});
var map;
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var mapInfos = [];
var infoWindowView = new google.maps.InfoWindow;
function initialize() {
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 5,
center: new google.maps.LatLng(49.072086992455475, -5.05078125),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
function mapInfoTable(container) {
this.tableContainer = container;
var me = this;
var cssClass = {
rowNumberCell: 'rowNumberCellClass'
};
this.dT = new google.visualization.DataTable();
this.dT.addColumn("string", "Name");
this.dT.addColumn("string", "City");
this.populateTable = function() {
this.dT.addRows([
['A1', 'C1'],
['A2', 'C2'],
['A3', 'C3'],
['A4', 'C4'],
['A5', 'C5'],
['A6', 'C6'],
['A7', 'C7'],
['A8', 'C8']
]);
this.draw();
}
this.table = new google.visualization.Table(document.getElementById(this.tableContainer));
this.draw = function() {
this.table.draw(this.dT, {
allowHtml: true,
showRowNumber: true,
cssClassNames: cssClass,
page: 'enable',
pageSize: 4,
pagingSymbols: {
prev: 'Previous',
next: 'Next'
}
});
}
}
google.maps.event.addListener(marker, 'click', function(e) {
var dTableInfo = document.createElement("div");
dTableInfo.id = "dTableInfo";
google.maps.event.addListener(infoWindowView, 'domready', function() {
var InfoTab = new mapInfoTable('dTableInfo');
InfoTab.populateTable(mapInfos);
});
infoWindowView.setContent(dTableInfo);
infoWindowView.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#mapCanvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapCanvas"></div>
I have the following markers:
var markers = [
{
"title": '1. Welgemeend',
"lat": '-33.805556',
"stopover": true,
"lng": '18.869722',
"description": '1. Welgemeend'
},
{
"title": '2. Ruitersvlei',
"lat": '-33.783294',
"lng": '18.935900',
"stopover": true,
"description": '2. Ruitersvlei'
}
];
However, when I add a third marker:
var markers = [
{
"title": '1. Welgemeend',
"lat": '-33.805556',
"stopover": true,
"lng": '18.869722',
"description": '1. Welgemeend'
},
{
"title": '2. Ruitersvlei',
"lat": '-33.783294',
"lng": '18.935900',
"stopover": true,
"description": '2. Ruitersvlei'
}
,
{
"title": '3. Spice Route',
"lat": '-33.760815',
"lng": '18.916757',
"stopover": true,
"description": '3. Spice Route'
},
];
The drawing of the lines go crazy. Here is my gmaps code:
<div id="property-map"></div>
<script type="text/javascript">
jQuery(function($) {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("property-map"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Intialize the Path Array
var path = new google.maps.MVCArray();
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length - 1; i++) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
});
</script>
What could be causing this?
Line 51: remove the line
path.push(src);
The first time you push polylines to this array; a few lines further you push route segments.
This gives you two different sets of lines superimposed.
You are using confusing variable names; this causes problems. "path" is probably not a good name to store an array of data (well, not for what you are doing).
A few other details: for(var i ...) -> You should put the var on the first for(), not on the second for().
poly.setPath(path); should not be inside a loop.
Here is how I would have done this.
(I added a 4th random point. Remove it if you want)
<head>
<style>
html, body, #property-map {
height: 400px;
margin: 0px;
padding: 0px
}
#content {
width: 200px;
overflow: hidden;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script>
<script>
var markers = [{
"title": '1. Welgemeend',
"lat": '-33.805556',
"lng": '18.869722',
"stopover": true,
"description": '1. Welgemeend'
},
{
"title": '2. Ruitersvlei',
"lat": '-33.783294',
"lng": '18.935900',
"stopover": true,
"description": '2. Ruitersvlei'
}
,
{
"title": '3. Spice Route',
"lat": '-33.760815',
"lng": '18.916757',
"stopover": true,
"description": '3. Spice Route'
},
{
"title": '4. Some random point',
"lat": '-33.75',
"lng": '18.90',
"stopover": true,
"description": '4. Some random point'
}];
jQuery(function($) {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("property-map"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var routeObjects = [];
var markerObjects = [];
var directionService = new google.maps.DirectionsService();
var latlngbounds = new google.maps.LatLngBounds();
// loop through the markers.
// Create the marker, then send a request for a route between this marker and the next (except for the last iteration).
for (var i=0; i<markers.length; i++) {
// create the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i].lat, markers[i].lng),
title: markers[i].title,
map: map
});
markerObjects.push(marker);
latlngbounds.extend(marker.position);
// click event: show an infowindow with the description
google.maps.event.addListener(marker, "click", function (e) {
var i = markerObjects.indexOf(this);
infoWindow.setContent('<div id="content">' + markers[i].description + '</div>');
infoWindow.setPosition(this.getPosition());
infoWindow.open(map, this);
});
// send a route request, except on the last iteration
if (i < markers.length - 1) {
directionService.route({
origin: new google.maps.LatLng(markers[i].lat, markers[i].lng),
destination: new google.maps.LatLng(markers[i + 1].lat, markers[i + 1].lng),
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
// We will draw this part of the route on the map; not worry about the other requests
var path = new google.maps.MVCArray();
for (var j = 0; j < result.routes[0].overview_path.length; j++) {
path.push(result.routes[0].overview_path[j]);
}
var poly = new google.maps.Polyline({
path: path,
map: map,
strokeColor: '#4986E7'
});
routeObjects.push(path); // I don't really us this in this script, but it might be useful
}
});
}
else { // last iteration. This might be a good place to do the last-minute things
map.fitBounds(latlngbounds);
}
}
});
</script>
</head>
<body>
<div id="property-map"></div>
</body>
I have asp.net web forms page which has repeater to show multiple markers at the page. I want to cluster the markers, I followed some examples found online but no success so far.
This is what I have:
html markup:
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"title": '<%# Eval("Name") %>',
"lat": '<%# Eval("Latitude") %>',
"lng": '<%# Eval("Longitude") %>',
"description": '<%# Eval("Name") %>'
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
var mapOptions = {
center: new google.maps.LatLng(43.648399, -79.485703),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var markerCluster = new MarkerClusterer(map, markers, mapOptions );
</script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(43.648399, -79.485703),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="dvMap" style="width: 500px; height: 277px">
</div>
</div>
Then, in the backend file I am getting all the data from database and sending to the repeater which properly renders multiple markers, as you can see at this screenshot as well: http://gyazo.com/049821984b889eefa551df663af0d2eb.png
This is the section I was trying to use to get the clustering working (visible in the code above as well):
var mapOptions = {
center: new google.maps.LatLng(43.648399, -79.485703),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var markerCluster = new MarkerClusterer(map, markers, mapOptions );
When I view the source of the page this is the content I am getting regarding the markers data:
<div class="divdisplay">
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
{
"title": 'Product Specialist',
"lat": '43.6877731',
"lng": '-79.2709108',
"description": 'Product Specialist'
}
,
{
"title": 'Finance Manager',
"lat": '43.7345524',
"lng": '-79.2561590',
"description": 'Finance Manager'
}
,
{
"title": 'New Job',
"lat": '43.7598255',
"lng": '-79.2252689',
"description": 'New Job'
}
,
{
"title": 'AD, Algorithmic Trading Development Team ',
"lat": '43.7240344',
"lng": '-79.3006776',
"description": 'AD, Algorithmic Trading Development Team '
}
,
{
"title": 'Financial Analyst - Investment Finance Systems Ana',
"lat": '43.7870613',
"lng": '-79.2761657',
"description": 'Financial Analyst - Investment Finance Systems Ana'
}
,
{
"title": 'New Business Coordinator CSR - Group Benefits',
"lat": '43.7891500',
"lng": '-79.1404511',
"description": 'New Business Coordinator CSR - Group Benefits'
}
,
{
"title": 'TD Job 1',
"lat": '43.7092267',
"lng": '-79.2962398',
"description": 'TD Job 1'
}
,
{
"title": 'Web Designer',
"lat": '43.7841207',
"lng": '-79.2917106',
"description": 'Web Designer'
}
,
{
"title": 'ceo',
"lat": '43.6488293',
"lng": '-79.3965691',
"description": 'ceo'
}
,
{
"title": 'IT Analyst',
"lat": '43.6546566',
"lng": '-79.3805941',
"description": 'IT Analyst'
}
,
{
"title": 'Part-Time MARKET RESEARCH INTERVIEWERS',
"lat": '43.6683729',
"lng": '-79.4392835',
"description": 'Part-Time MARKET RESEARCH INTERVIEWERS'
}
];
var mapOptions = {
center: new google.maps.LatLng(43.648399, -79.485703),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var mcOptions = {gridSize: 50, maxZoom: 15};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
</script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(43.648399, -79.485703),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="dvMap" style="width: 500px; height: 277px">
</div>
</div>
Every advice is greatly welcome. Thanks, Laziale
You need to pass an array of google.maps.Marker objects to the marker clusterer - you're passing your array of initial marker data.
You need to create a new MarkerClusterer after all markers have been created, not before. So, remove these lines from the first script block in your example:
var mcOptions = {gridSize: 50, maxZoom: 15};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
We'll move these to after all the markers have been created. So change your window.onload function to this:
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(43.648399, -79.485703),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// declare an array to keep all google.maps.Marker instances in:
var googleMarkers = [];
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
// add the new marker to the googleMarkers array
googleMarkers.push(marker);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
// now all the markers have been created, make a new MarkerClusterer:
var mcOptions = {gridSize: 50, maxZoom: 15};
var markerCluster = new MarkerClusterer(map, googleMarkers, mcOptions);
}
</script>
I need to plot multiple custom map markers using MapsV3 api either by an address or lat/lon. I put together the following code which works ok for lon/lat, but if the data contains an address the geocoder returns nothing. Any ideas on how to fix this.
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(-27.0,133.0);
var options = {
panControl: false,
zoomControl: true,
scaleControl: false,
mapTypeControl: false,
streetViewControl: false,
zoom: 3,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), options);
var data = [
{
'title':'F C Building Construction ...',
'address':'',
'zindex':20,
'lat':'-33.797847',
'lon':'151.259928',
'marker_number':1,
'marker_html':' html content...',
'image': {
url:'//localhost/assets/images/markers/marker_1.png',
size: new google.maps.Size(24, 29),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(10, 29)
}
}];
setMarkers(map, data);
var infowindow = new google.maps.InfoWindow();
}
function showMapPin(i) { }
function setMarkers(map,data) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < data.length; i++) {
setMarker(map, data[i], bounds);
}
map.fitBounds(bounds);
}
function setMarker(map, m, bounds) {
if(m["address"]!="") {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { "address": m["address"] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var siteLatLng = results[0].geometry.location;
}
});
} else {
var siteLatLng = new google.maps.LatLng(m["lat"], m["lon"]);
}
if(siteLatLng) {
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
//shadow: shadow,
icon: m["image"],
title: m["title"],
zIndex: m["zindex"],
html: m["marker_html"]
});
bounds.extend(siteLatLng);
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
} // if latlng
}//]]>
After looking back over the code I realized that the variable siteLatLng is within geocode function scope so it never gets passed and it can't be returned. Setting the marker within this function works.
I have a custom google map which i have added styling to, its an event map with dynamic markers, i have got the map working where it loads all the dynamic markers and info, on my page there are results underneath the map, i would like to be able to click on a link in the results which will open the relevant infowindow on the map. I have been using Raymond Camdens demo which is from this article, i cannot get the last part to work with the links on the page(i had to take the geocoding part of the script out as i dont need it to geocode addresses, im using coordinates.)
Here is my code:
var map;
var lastinfowindow;
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
{ hue: "#0b9cc1" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "administrative.country",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
},
{ featureType: "water",
elementType: "geometry",
stylers: [ { visibility: "on" }, { lightness: -10 }] },
{ featureType: "poi",
stylers: [ { visibility: "on" } ] }
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var latlng = new google.maps.LatLng(38, -90);
var mapOptions = {
zoom: 3,
center: latlng,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var image = 'sp-mark.png';
latLng = new google.maps.LatLng ('23.00593', '12.65287');
var marker1 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 1 - 38',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 38;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('57.19173', '-1.7083');
var marker2 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 2 - 30',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 2</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 30;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('56.98083', '1.30056');
var marker3 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 3 - 32',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 3</h3><p>Location: here, Ibiza</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 32;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('58.96', '1.39861');
var marker4 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 4 - 41',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 41;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('-43.92528', '28.42389');
var marker5 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 5 - 47',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 5</h3><p>Location: Here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 47;
marker.infowindow = infowindow;
markers[markers.length] = marker;
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
$(".order").click(function() {
var thisgig = $(this).data("gigid");
for(var i=0; i<markers.length; i++) {
if(markers[i].gigid == thisgig) {
console.log("found my match");
//get the latlong
if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
console.dir(markers[i]);
map.panTo(markers[i].getPosition());
markers[i].infowindow.open(map, markers[i]);
lastinfowindow = markers[i].infowindow;
}
}
});
}
here is the body section where the links will go:
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="orders">
<p class="order" data-gigid="38">
<b>Order 38</b><br/>
Event 1
</p>
<p class="order" data-gigid="30">
<b>Order 30</b><br/>
Event 2
</p>
<p class="order" data-gigid="32">
<b>Order 32</b><br/>
Event 3
</p>
<p class="order" data-gigid="41">
<b>Order 41</b><br/>
Event 4
</p>
<p class="order" data-gigid="47">
<b>Order 47</b><br/>
Event 5
</p>
</div>
</body>
Please can someone help me with this issue.
Thanks
Google maps will generally fail to load if you have any javascript errors in your page. You have many.
You have a syntax error here:
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>
});
Should be:
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
});
LatLng takes two floats, not two strings:
latLng = new google.maps.LatLng ('23.00593', '12.65287');
Javascript is case-sensitive. So when you say:
latLng = new google.maps.LatLng ('23.00593', '12.65287');
var marker1 = new google.maps.Marker({
...
position: LatLng
});
It doesn't recognise LatLng because your variable was called latLng
The problem here:
marker.gigid = 38;
is that you don't have a variable called marker; you have a variable called marker1:
var marker1 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 1 - 38',
icon:image
});
For completeness, here's how one of your markers should be done (there are better ways, but this should work):
latLng = new google.maps.LatLng (23.00593,12.65287);
var marker1 = new google.maps.Marker({
map: map,
position: latLng ,
title: 'Event 1 - 38',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map,marker1);
});
marker1.gigid = 38;
marker1.infowindow = infowindow;
markers[markers.length] = marker1;