Google Maps API v3 port - google-maps-api-3

I am trying to port my google api v2 to v3 but it does not work....i get an "Polyline is not defined" error... :/ the old Polyline is GPolyline and the new is new google.maps.Polyline
https://developers.google.com/maps/documentation/javascript/overlays?hl=de-DE#Polylines
var map = "";
var mapConfig = "";
var mapElements = "";
var curActiveMenuButton = "";
var clickHandlerElementCount = "";
//window.onload = function() {
//window.addEvent('domready', function() {
//document.addEvent('domready', function() {
//alert("The DOM is ready.");
//initializeMap();
//});
/*
* function initializeMap()
*
* Initalisierung der Google-Map.
*/
function initializeMap(){
// Karte ins DOM einhängen
map = new google.maps.Map($('map_canvas'), myOptions);
//place the map on the canvas
//map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var latlng = new google.maps.LatLng(51.05758110879136, 10.451431274414062);
// default zoomlevel and center point
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
mapTypeControl: true,
scaleControl: true,
};
// default zoomlevel and center point
var encodedPolyline = new google.maps.Polyline();
// find bounding polyline and recalculate map center
for (var i = 0; i < mapElements.length; i++) {
if (mapElements[i]['titel'] == "nationalparkhainich") {
encodedPolyline = Polyline.fromEncoded({
points: mapElements[i]['pol'],
levels: mapElements[i]['lev']
});
mapCenter = encodedPolyline.getBounds().getCenter();
i = mapElements.length;
}
}
// Kartenmenue initialisieren
//initializeMapMenue();
}

Polyline is indeed not defined. You use it here:
encodedPolyline = Polyline.fromEncoded({
Version 3 doesn't include fromEncoded() — it appears that you need to use the geometry library (which needs to be explicitly loaded separately) and
encodedPolyline.setPath(
google.maps.geometry.encoding.decodePath(mapElements[i]['pol'])
);
[split on to separate lines here for clarity]

Related

Show data when Google Maps marker is clicked in markercluster

I am trying to work out how to show custom data when a Google Maps markerclusterer marker is clicked but can't find this documented anywhere.
My markerclusterer code looks like this but my attempt at capturing the click event on a marker is not working:
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
google.maps.event.addDomListener(window, 'load', initialize);
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
/*
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
icon: markerImage
});
markers.push(marker);
}
*/
for (var i = 0; i < numItemsToShow; ++i) {
var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long);
var marker = new google.maps.Marker({
position: latLng,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom == -1 ? null : zoom;
size = size == -1 ? null : size;
style = style == -1 ? null: style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP,
//styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"on"},{"color":"#052366"},{"saturation":"-70"},{"lightness":"85"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":"-53"},{"weight":"1.00"},{"gamma":"0.98"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"},{"lightness":"0"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"hue":"#3dff00"},{"saturation":"-100"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"saturation":"-18"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#57677a"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"lightness":"40"}]}]
styles: [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#b5cbe4"}]},
{"featureType":"landscape","stylers":[{"color":"#efefef"}]},
{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#83a5b0"}]},
{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#bdcdd3"}]},
{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"}]},
{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e3eed3"}]},
{"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]},
{"featureType":"road"},
{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{},
{"featureType":"road","stylers":[{"lightness":20}]}]
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
google.maps.event.addListener(markerClusterer, 'click', function () {
// do something with this marker ...
this.setTitle('I am clicked');
});
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
This works for me (it opens an infowindow when you mouseover the cluster icon, if you click on the cluster icon, the default behavior is to zoom to the cluster bounds, which makes it hard to see the change of the tooltip/title on the cluster icon):
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(markerClusterer, 'mouseover', function (cluster) {
// do something with this cluster ...
infoWindow.setContent("Mouseover<br>"+cluster.getCenter().toUrlValue());
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(map);
});

Marker cluster displaying only one Marker when having exact corodinates

This is my fiddle
http://jsfiddle.net/6wp7enot/12/
var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [
[43.65654, -79.90138, 'ABC'],
[43.65654, -79.90138, 'DEF'],
[43.65654, -79.90138, 'GHA']
]; //create global array to store points
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787, -79.359741),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var mcOptions = {
gridSize: 50,
maxZoom: 15
};
var mc = new MarkerClusterer(map, [], mcOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
for (var i = 0; i < myPoints.length; i++) {
createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
}
mc.addMarkers(markerArray, true);
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(latlng, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
markerArray.push(marker); //push local var marker into global array
}
window.onload = initialize;
Could you please let me know how to handle this
You created all the three markers at same position means same latitude and longitude. So three markers created at one place only. Please change latitude and longitude of other two elements from the array.
eg.
var myPoints = [
[43.65654, -79.90138, 'ABC'],
[44.65654, -79.90138, 'DEF'],
[45.65654, -79.90138, 'GHA']
]; //create global array to store points

maps.event.trigger Resize( ) not working

I am working on google maps for quite some time, I am familiar with code and how it works, but unable to place the resize event properly that causes my map to render grey tiles on screen.
Please suggest me where exactly need to place the resize event
Here is my code :
bank.atmDetailsSuccess = function(response) {
bank.locate = response;
bank.getAtmStatus();
};
bank.getAtmStatus = function(results, status) {
var status = bank.locate.Status[0].Value0;
locate = bank.locate;
var map;
if (status == bank.constants.STATUS_ERROR) {
var message = locate.Error[0].Value0;
WL.simpledialog.show(message);
} else if (status == bank.constants.STATUS_SESSION_EXPIRED) {
WL.simpledialog.show("Session Expired!!");
} else if (status == bank.constants.STATUS_SUCCESS) {
map = bank.initializeAtm();
google.maps.event.addDomListener(window, 'load', initializeAtm);
google.maps.event.addDomListener(window, "resize", function() {
alert("In");
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
map.setZoom(10);
});
}
};
bank.initializeAtm = function(){
locate = bank.locate;
var firstlat = locate.Stmt[0].Value5;
var firstlong= locate.Stmt[0].Value6;
// var latlng = new google.maps.LatLng(latitude,longitude);
var image = {
//url: bank.constants.MARKER_PATH,
url: 'images/720x720/pin.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(32, 40),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 32)
};
var myOptions = {
zoom: 10,
center:new google.maps.LatLng(firstlat, firstlong),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map-canvas')[0], myOptions);
geocoder = new google.maps.Geocoder();
bank.currentposition();
$('#mapbranch').hide();
$('#map-canvas').show();
$('#atm').html("ATM near your current location");
$('#results').html("");
var directionsService = new google.maps.DirectionsService();
MVC.local.directService = directionsService;
directionsRenderer = new google.maps.DirectionsRenderer({
suppressMarkers: true} );
MVC.local.renderer = directionsRenderer;
var n;
for(n=0; n<locate.Stmt.length; n++)
{
var value = locate.Stmt[n];
name = value.Value0,value.Value1;
lat = value.Value5;
lon = value.Value6;
bank.getDistanceFromLatLonInKm(12.919336, 77.502291,lat,lon);
var myLatLng = new google.maps.LatLng(lat,lon);
var marker = new google.maps.Marker({
position: myLatLng,
icon:image,
map: map,
title: name,
zIndex: 1
});
bank.buildInfoWindow(marker,map,value[n]);
}
return map;
};
Note:This is completely working code only problem is rendering works when i resize broswer manually but not resizing while loading. Please don't mind variable names.All function calls are good except resize event.

RouteBoxer not working

A polyline is created using the click function. I am using the RouteBoxer Utility to create a set of boxes along this polyline. I have tested the drawBoxes function with an alert box and it is working but the boxes are not showing up. I guess i'm missing something. Any tips?
(function() {
window.onload = function() {
var places = [];
var path;
var string = "";
var para = document.getElementById("para");
var map = null;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null;
//create reference to div tag in HTML file
var mapDiv = document.getElementById('map');
// option properties of map
var options = {
center: new google.maps.LatLng(-20.2796, 57.5074),
zoom : 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create map object
var map = new google.maps.Map(mapDiv, options);
// create MVC array to populate on click event
var route = new google.maps.MVCArray();
var polyline = new google.maps.Polyline({
path: route,
strokeColor: '#ff0000',
strokeOpacity: 0.6,
strokeWeight: 5
});
polyline.setMap(map);
// create click event,attach to map and populate route array
google.maps.event.addListener(map,'click', function(e) {
// create reference to polyline object
path = polyline.getPath();
// add the position clicked on map to MVC array
path.push(e.latLng);
});
$('#compute').click(function() {
routeBoxer = new RouteBoxer();
distance = parseFloat((0.1) * 1.609344);
var boxes = routeBoxer.box(polyline,distance);
drawBoxes(boxes);
});
};
})();
// Draw the array of boxes as polylines on the map
function drawBoxes(boxes) {
alert('working in function');
boxpolys = new Array(boxes.length);
for (var i = 0; i < boxes.length; i++) {
boxpolys[i] = new google.maps.Rectangle({
bounds: boxes[i],
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: '#000000',
strokeWeight: 3,
map: map
});
}
}
Your var map needs to be global, otherwise it is not visible from within function drawBoxes().
Move the declaration outside the function.
var map;
(function() {
window.onload = function() {
var places = [];
var path;
var string = "";
var para = document.getElementById("para");
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null;
//create reference to div tag in HTML file
var mapDiv = document.getElementById('map');
// option properties of map
var options = {
center: new google.maps.LatLng(-20.2796, 57.5074),
zoom : 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create map object -
//============== no 'var' keyword here ======================
map = new google.maps.Map(mapDiv, options);
... etc ...

Javascript Google map api V3 fitbounds with center location

I want to fitbound pushpins to visible all around user's location pushpin. i wrote the following code it center the user location but few pushpin goes out of map ??
FYI: userPinLoc is pushpin object which is already populated
function setInitialZoom() {
mapZoom = googleMap.getZoom();
var bounds = new google.maps.LatLngBounds();
bounds.extend(userPinLoc);
for (i in nearestEntitiesToZoom) {
entity = nearestEntitiesToZoom[i];
var googleLatLng = new google.maps.LatLng(entity.latitude,entity.longitude);
bounds.extend(googleLatLng);
}
google.maps.event.addDomListener(googleMap, 'bounds_changed', function() {
googleMap.setCenter(userPinLoc);
});
googleMap.fitBounds(bounds);
}
I'm not sure where you're getting userPinLoc from. Give this a go:
...
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (i in nearestEntitiesToZoom) {
entity = nearestEntitiesToZoom[i];
var googleLatLng = new google.maps.LatLng(entity.latitude, entity.longitude);
bounds.extend(googleLatLng);
};
// Fit these bounds to the map
googleMap.fitBounds(bounds);
...
Remember, fitCenter or fitBounds needs a LatLng object as a parameter.
This code is adapted from: http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
I did it using java and javascript
public static void calculateMapFitBounds(GeoLocation userLocation, List<GeoLocation> contents, Map<String, GeoLocation> latlngBounds){
if (Util.isEmtpyGeoLocation(userLocation) || contents == null || contents.isEmpty()) {
return;
}
//SW
double minLat = userLocation.getLatitude();
double minLng = userLocation.getLongitude();
//NE
double maxLat = userLocation.getLatitude();
double maxLng = userLocation.getLongitude();
for(GeoLocation content: contents){
/*
* Populating Top left cordinate (SW)
*/
minLat = Math.min(minLat, content.getLatitude());
minLng = Math.min(minLng, content.getLongitude());
/*
* Populating Bottom right cordinate (NE)
*/
maxLng = Math.max(maxLng, content.getLongitude()) ;
maxLat = Math.max(maxLat, content.getLatitude());
}
/*
* Calculating Delta fit bounds
*/
double latDelta = Math.max(Math.abs(userLocation.getLatitude() - minLat), Math.abs(maxLat-userLocation.getLatitude()));
double lngDelta = Math.max(Math.abs(userLocation.getLongitude() - maxLng), Math.abs(minLng - userLocation.getLongitude()));
//Calculating SW
minLat = userLocation.getLatitude() - latDelta;
minLng = userLocation.getLongitude()- lngDelta;
latlngBounds.put("swLatLng", new GeoLocation(minLat, minLng));
//Calculating NE
maxLat = userLocation.getLatitude() + latDelta;
maxLng = userLocation.getLongitude()+ lngDelta;
latlngBounds.put("neLatLng", new GeoLocation(maxLat, maxLng));
}
I am using velocity views so here is velocity and js code
#if($swLatLng && $neLatLng)
var swLatLn = new google.maps.LatLng($!swLatLng.latitude, $!swLatLng.longitude, false);
var neLatLn = new google.maps.LatLng($neLatLng.latitude, $neLatLng.longitude, false);
var bounds = new google.maps.LatLngBounds(swLatLn, neLatLn);
googleMap.fitBounds(bounds);
#end
When I've done this before, I've done the bounds.extend() for the map center as the very last one, not the first one. Which seemed to work better for some reason.
function initialize() {
var points = [
{
lat: 51.498725,
lng: -0.17312
},
{
lat: 51.4754091676,
lng: -0.186810493469
},
{
lat: 51.4996066187,
lng: -0.113682746887
},
{
lat: 51.51531272,
lng: -0.176296234131
}
];
var centerLatLng = {lat: 51.532315, lng: -0.1544};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: centerLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var homeMarker = new google.maps.Marker({
position: centerLatLng,
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/green-dot.png"
});
for (var i = 0; i < points.length; i++) {
var marker = new google.maps.Marker({
position: points[i],
map: map
});
bounds.extend(points[i]);
}
bounds.extend(centerLatLng);
map.fitBounds(bounds);
}

Resources