We Keep Coding

GoogleMaps addlistener zip popup?

Alright, this has been a problem for me for 3 days, javascript closures are just not my strong suit.
I have a google map which I've applied an overlay with a series of clickable polygons. I want a specific function to run depending on the polygon clicked, which I have working. The problem is I can't figure out how to work the listener so that a function that displays an infowindow with that polygon's zip code in it. Here's the code:
for (x = 0; x < 50 && coordsObject.length > x; x++) { //Only draw 50 polygons at a time
...
//create zipcoords array
clickablePolygons.push(new google.maps.Polygon({
paths: zipCoords
, strokeColor: "#000"
, strokeOpacity: 1
, strokeWeight: 1
, fillColor: convertRatingToHex(rating)
, fillOpacity: 0.45
}));
infoWindow.push(
new google.maps.InfoWindow({
content: '<div id="gcontent">' + zip.toString() + '</div>'
})
);
//problem child
var theFunction = function(arguments, infowindow, map) {
var marker = new google.maps.Marker({
position: arguments[0].latLng
});
infowindow.open(map, marker);
};
google.maps.event.addListener(clickablePolygons[clickablePolygons.length - 1], 'click', function() {
theFunction(arguments, infoWindow[x], map); //:(
});
clickablePolygons[clickablePolygons.length - 1].setMap(map);
}
What am I doing wrong with the closure?

in your addListener call you have function() and not function(arguments). I would also create a variable pointing to the infoWindow outside the call to addlistener. The assumption is that the click event will pass in the arguments that you are expecting. It may need to be function(e,arguments).
var win = infoWindow[x];
google.maps.event.addListener(clickablePolygons[clickablePolygons.length - 1], 'click', function(arguments) {
theFunction(arguments, win, map);
});

Looks like variable scoping problem, give it a try
(function(x){
google.maps.event.addListener(clickablePolygons[clickablePolygons.length - 1], 'click', function(arg) {
theFunction(arg, infoWindow[x], map);
});
})(x);

You do not need multiple instances of an InfoWindow. Just use the methods to set the content and position when needed.
I do not understand why you are adding a marker, is that a requirement? If you just want an InfoWindow to show when the polygon is clicked you can use the MouseEvent object passed from the click event to get the current position of the click.
Here is an example: http://jsfiddle.net/bryan_weaver/akLBM/
code in the link:
var map;
var infoWindow;
var clickablePolygons = [];
function createPolygon(path, stateName) {
var poly = new google.maps.Polygon({
paths: path,
strokeColor: "#000",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "#330000",
fillOpacity: 0.45
});
//add the polygon to the array, to use later if needed.
clickablePolygons.push(poly);
//attach a click event, the first argument of the listener is the event
//you can get the position of the mouse cursor where the map
//was clicked through this.
google.maps.event.addListener(poly, "click", function (event) {
//call the setContent method and set the content for the info window
infoWindow.setContent("This state is: " + stateName);
//set the anchor of the info window, in this case
//I am using the mouse position at
//the time of the click
infoWindow.setPosition(event.latLng);
//open the info window, passing the map in which to attach it to.
infoWindow.open(map);
});
//add the polygon to the map
poly.setMap(map);
}
function initialize() {
var myLatLng =
new google.maps.LatLng(39.983994270935625, -111.02783203125);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//polygon coords for Utah
var utah = [
new google.maps.LatLng(41.983994270935625, -111.02783203125),
new google.maps.LatLng(42.00032514831621, -114.01611328125),
new google.maps.LatLng(36.96744946416931, -114.01611328125),
new google.maps.LatLng(37.00255267215955, -109.0283203125),
new google.maps.LatLng(40.97989806962013, -109.0283203125),
new google.maps.LatLng(41.0130657870063, -111.02783203125)];
//polygon coords for Colorado
var colorado = [
new google.maps.LatLng(40.96330795307351, -109.05029296875),
new google.maps.LatLng(36.96744946416931, -109.0283203125),
new google.maps.LatLng(37.02009820136811, -101.9970703125),
new google.maps.LatLng(40.97989806962013, -102.06298828125)];
map = new google.maps.Map($('#map')[0], mapOptions);
//create a single info window for use in the application
infoWindow = new google.maps.InfoWindow();
//add the polygon and infowindow content to the map.
createPolygon(utah, "Utah");
createPolygon(colorado, "Colorado");
}
google.maps.event.addDomListener(window, 'load', initialize);

multiple polygons, InfoWindow, setMap

well, I've spent a while on this, and I've stumbled my way through and got this far with the help of many tutorials and examples.
I need to create multiple polygons each with a separate InfoWindow. Think I've got that but having trouble with setMap. This is how far I've got:
Getting a type error
object #<object> has no method 'setMap'
How can I fix this error?
<script>
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
// Let's start with an empty object:
var countries = {
};
// Now let's add a county polygon:
countries['UK'] = new google.maps.Polygon({
paths: [
new google.maps.LatLng(59.677361, -2.469846),
new google.maps.LatLng(59.299717, -6.314917),
new google.maps.LatLng(57.877247, -9.314917),
new google.maps.LatLng(54.428078, -11.638861),
new google.maps.LatLng(51.784554, -11.702241),
new google.maps.LatLng(50.185848, -10.054354),
new google.maps.LatLng(49.405380, -7.012100),
new google.maps.LatLng(49.090675, -3.272664),
new google.maps.LatLng(48.775970, -1.709283),
new google.maps.LatLng(49.757851, -2.089565),
new google.maps.LatLng(50.714554, 1.037195),
new google.maps.LatLng(51.482437, 2.304801),
new google.maps.LatLng(53.433609, 3.276632),
new google.maps.LatLng(55.863132, 3.445646)
// ...
],
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.3
});
// Next county:
countries['FR'] = new google.maps.Polygon({
paths: [
// This is not real data:
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.757370),
new google.maps.LatLng(25.774252, -80.190262)
// ...
],
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.3
});
// And so on...
countries.setMap(map)
;
// Add a listener for the click event
google.maps.event.addListener(UK, 'click', showInfoUK);
google.maps.event.addListener(FR, 'click', showInfoFR);
infowindow = new google.maps.InfoWindow();
}
function showInfoUK(event) {
var contentString = "<b>UK</b><br />";
contentString += "UK, Channel Islands, Ireland";
// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
function showInfoFR(event) {
var contentString = "<b>FR</b><br />";
contentString += "France, N,W";
// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
</script>

Javascript doesn't have references to keys like for example php, so countries['UK'] is not possible to set. You have to use numeric keys. So syntax should be something like this:
countries[0] = new google.maps.Polygon({ ... });
countries[1] = new google.maps.Polygon({ ... });
I made your example working:
http://jsfiddle.net/AcCzT/15/
Can be finetuned. It's not perfect. It's just a quick fix.
You can go on from there

Javascript arrays do not have a .setMap() method. google.maps.Polygon() objects do. Additionally, there are no associative arrays in javascript, such as countries['UK']
This might work:
countries['UK'].setMap(map);
but it wouldn't be correct.

There are two issues in your code:
What Marcelo said, to add the polygon to the map, use: countries["UK"].setMap(map);
To add the click listener, you need to reference the polygon: google.maps.event.addListener(countries["UK"], 'click', showInfoUK);
working example

use ajax easier, more plain.
for example,
downloadUrl("url", function(data) {
for (var i = 0; i < polygons.length; i++) {
........
var decodedPath = ........
polygon.setMap(map);
........
}
});

Using 2 methods to display markers and polylines on a Google map

I am trying to combine two separate methods to display both markers and polylines on one map. Is it possible? and if so how would I do this. Or conversely how would I add polylines to my markers sample.
From http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
Without my actual code I appreciate this is a probably a wasted post.. but I am having trouble adding my code..
Perhaps that should have been my first question..

This script will add markers and draw a polyline between them:
<script>
var poly;
var map;
function initialize() {
var chicago = new google.maps.LatLng(41.879535, -87.624333);
var mapOptions = {
zoom: 7,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* #param {MouseEvent} mouseEvent
*/
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
</script>
Excellent Documentation available here:
https://developers.google.com/maps/documentation/javascript/reference
https://google-developers.appspot.com/maps/documentation/javascript/examples/polyline-complex

It is certainly possible to display markers and polylines on the same map:
Here is an example that displays both markers and independent polylines.
Here is an example that uses the third party geoxml3 KML parser to create them from a KML file (or using KmlLayer).

Plotting bus route with Google Maps

I'm working on a property rental site. On the site I'd like to have a Google map, with all of the properties marked, and the local bus routes drawn, so that renters can see the proximity of the properties to the route.
I've achieved the first part of the problem; I've plotted the properties using markers. Now I need to add the bus route.
I've looked in to this and I can't quite work out the best way to achieve it. I looked at polylines and at using this tool, but the route is complex and would take hundreds of co-ordinates.
There is some kind of route api, as in this post but apparently it can only take 8 waypoints. Is that right?
Ideally I'd like to draw the map by selecting a start point, an end point, and dragging the route into place; and then somehow importing that route into what I have.
Here is the exact route that I want to import: http://www2.warwick.ac.uk/services/accommodation/landlords/12busroutes/.
My code to plot the properties is:
var siteRoot = "<?php bloginfo('stylesheet_directory');?>/";
var markers = [
<?php
$my_query = new WP_Query( 'post_type=properties' );
while ($my_query->have_posts()) : $my_query->the_post();
kdev_maps('list');
endwhile; // end of the loop.
?>
];
function googlemap() {
jQuery('#map_canvas').css({'height': '400px'});
// Create the map
// No need to specify zoom and center as we fit the map further down.
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
// Create the shared infowindow with two DIV placeholders
// One for a text string, the other for the StreetView panorama.
var content = document.createElement("div");
var title = document.createElement("div");
var boxText = document.createElement("div");
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-117,-200)
,zIndex: null
,boxStyle: {
background: "url('"+siteRoot+"images/house-icon-flat.png') no-repeat"
,opacity: 1
,width: "240px"
,height: "190px"
}
,closeBoxMargin: "10px 0px 2px 2px"
,closeBoxURL: "http://kdev.langley.com/wp-content/themes/langley/images/close.png"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var infoWindow = new InfoBox(myOptions);
var MarkerImage = siteRoot+'images/house-web-marker.png';
// Create the markers
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.title,
content: data.html,
icon: MarkerImage
});
google.maps.event.addListener(marker, "click", function() {
infoWindow.open(map, this);
title.innerHTML = marker.getTitle();
infoWindow.setContent(marker.content);
infoWindow.open(map, marker);
jQuery(".innerinfo").parent().css({'overflow':'hidden', 'margin-right':'10px'});
});
}
// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
var origcent = new google.maps.LatLng(map.getCenter());
// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is loaded in the DOM.
closeInfoWindow = function() {
infoWindow.close();
};
google.maps.event.addListener(map, 'click', closeInfoWindow);
google.maps.event.addListener(infoWindow, 'closeclick', function()
{
centermap();
});
function centermap()
{
map.setCenter(map.fitBounds(bounds));
}
}
jQuery(window).resize(function() {
googlemap();
});
Any help is much appreciated.

Its worth looking at two things:
1) The GTFS format (https://developers.google.com/transit/gtfs/reference) this is a csv-based format that allows someone to cross reference transit times and routes, if you are lucky then the data will have been assembled for you for your transit authority :)
2) If you can pull in the coordinates then you can make a line feature as long as you want (within the bounds of browser capacity). This is done in much the same way as you pull in markers, except you pull the features you want into a polyline:
like this (from gmaps docs):
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
you will build your array from php, of course :)
hope that helps.

If you use free google maps you can use a start point, end point and 8 way point. In google maps api premiere you can use 23 way point for routing vehicles

Google Maps v3 - Can't get a polygon and/or rectangle to display on map

I've been working on a .NET geocoding application that at the end displays a Google Map (using the v3 API) of an address or place. The map has a marker in the centre representing the point that is geocoded. This all works. I then wanted to display a rectangle/polygon shape overlay on the map that represents the bounds surrounding the point that was geocoded (this reflects the accuracy of the geocoding, with larger bounds representing less accuracy). (I get the co-ordinates of these bounds back from the API query).
However, I just cannot get a polygon or rectange to display on the map and it's driving me crazy! I've followed the instructions in the documentation for polygons but no joy. I've tried google.maps.Polygon and google.maps.Rectangle, but with no luck for either. I've also tried different lat/lngs for the bounds but it made no difference. Nothing ever shows. I must be making some fundamental mistake, but can't see any trees in these woods!
The basic code (which is generated from C#) I have looks like this:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
if (window.attachEvent) {window.attachEvent('onload', initMap);}
else if (window.addEventListener) {window.addEventListener('load', initMap, false);}
else {document.addEventListener('load', initMap, false);}
function initMap() {
var latlng = new google.maps.LatLng(51.5001524,-0.1262362);
var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: latlng, map: map, title:'Westminster, London, UK'
});
var boundCoords = [
new google.maps.LatLng(51.3493528),
new google.maps.LatLng(-0.378358),
new google.maps.LatLng(51.7040647),
new google.maps.LatLng(0.1502295),
];
var poly = new google.maps.Polygon({
paths: boundCoords, strokeColor: '#FF0000', strokeOpacity: 0.8,
strokeWeight: 3, fillColor: '#FF0000', fillOpacity: 0.35
});
poly.setMap(map);
console.log(poly);
}
</script>
<div id="map_canvas" style="width:640px; height:480px"></div>
There is a JSFiddle version available here you can play with.

new google.maps.LatLng(51.3493528),
You need x,y coords, for example
new google.maps.LatLng(32.321384, -64.75737),
OR
you need two markers, example:
var latLngBounds = new google.maps.LatLngBounds(
marker1.getPosition(),
marker2.getPosition()
);
rectangle.setBounds(latLngBounds);