Develop Reference

Google maps API V3 method fitBounds() using Prototypejs

I have a div as follows to display a google map:
#map {
width: 300px;
height: 300px;
border: 1px solid #DDD;
}
<div id="map"></div>
I want to display the map with a zoom level that fits the bounds of the above viewport.
When I code as follows it works fine:
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($('#map')[0], {zoom: 10});
geocoder.geocode({ 'address': generatedAddress }, function (results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
if (results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
When I use typeahead-addresspicker.js to generate the map it zooms in too far?
I've narrowed it down to the following code. When you call the AddressPicker.prototype.updateMap function the boundsForLocation option on AddressPicker.prototype.initMap function should return this.map.fitBounds(response.geometry.viewport); When I debug I can see that it is hitting the following code inside the AddressPicker.prototype.updateBoundsForPlace function as expected:
if (response.geometry.viewport) {
console.log('test');
return this.map.fitBounds(response.geometry.viewport);
}
What I don't understand is how it gets wired back to the google.maps.Map - I'm not familiar with ptototypejs? So basically running through it, we initilize the map by calling initMap, then we call the updateMap function. Inside updateMap function we are calling the following snippet of code:
if (_this.map) {
if ((_ref = _this.mapOptions) != null) {
_ref.boundsForLocation(response);
}
}
which is suppose to set the bounds by calling the updateBoundsForPlace but the google maps options doesnt expose any property called boundsForLocation?
AddressPicker.prototype.initMap = function() {
var markerOptions, _ref, _ref1;
if ((_ref = this.options) != null ? (_ref1 = _ref.map) != null ? _ref1.gmap : void 0 : void 0) {
this.map = this.options.map.gmap;
} else {
this.mapOptions = $.extend({
zoom: 3,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
boundsForLocation: this.updateBoundsForPlace
}, this.options.map);
this.map = new google.maps.Map($(this.mapOptions.id)[0], this.mapOptions);
}
this.lastResult = null;
markerOptions = $.extend({
draggable: true,
visible: false,
position: this.map.getCenter(),
map: this.map
}, this.options.marker || {});
this.marker = new google.maps.Marker(markerOptions);
if (markerOptions.draggable) {
return google.maps.event.addListener(this.marker, 'dragend', this.markerDragged);
}
};
AddressPicker.prototype.updateMap = function(event, place) {
if (this.options.placeDetails) {
return this.placeService.getDetails(place, (function(_this) {
return function(response) {
var _ref;
_this.lastResult = new AddressPickerResult(response);
if (_this.marker) {
_this.marker.setPosition(response.geometry.location);
_this.marker.setVisible(true);
}
if (_this.map) {
if ((_ref = _this.mapOptions) != null) {
_ref.boundsForLocation(response);
}
}
return $(_this).trigger('addresspicker:selected', _this.lastResult);
};
})(this));
} else {
return $(this).trigger('addresspicker:selected', place);
}
};
AddressPicker.prototype.updateBoundsForPlace = function(response) {
if (response.geometry.viewport) {
return this.map.fitBounds(response.geometry.viewport);
} else {
this.map.setCenter(response.geometry.location);
return this.map.setZoom(this.options.zoomForLocation);
}
};

Managed to fix by commenting out the following lines:
//if (response.geometry.viewport) {
// return this.map.fitBounds(response.geometry.viewport);
//} else {
this.map.setCenter(response.geometry.location);
return this.map.setZoom(this.options.zoomForLocation);
//}

Removing selected geojson feature with Google Maps JavaScript API

I'm using the Google Maps Javascript API to let users draw custom polygons with properties to be entered into a database. Before inserting them into the database though, they need to be able to delete selected shapes they've drawn.
This function isn't throwing any errors but it also isn't deleting the feature. What am I doing wrong?
var selectedshape;
function initMap() {
map = new google.maps.Map(document.getElementById('map2'), {
zoom: 1,
center: { lat: -1, lng: 1 }
});
function clearSelection() {
if (selectedShape) {
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
}
map.data.addListener('click', function(event) {
map.controls[google.maps.ControlPosition.TOP_RIGHT].clear()
setSelection(event.feature);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
map.data.revertStyle();
map.data.overrideStyle(event.feature, { strokeWeight: 8 });
selectID = event.feature.getProperty('uniqid')
selectID = event.feature.getProperty('uniqgeom')
$(".getSelectID").attr("id", selectID)
});
bounds = new google.maps.LatLngBounds();
map.data.addListener('addfeature', function(event) {
processPoints(event.feature.getGeometry(), bounds.extend, bounds);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
var uniqid = "_" + Date.now();
feature_type = event.feature.getGeometry().getType()
if (feature_type == 'LineString') {
encoded_geom = event.feature.getProperty('uniqgeom') || google.maps.geometry.encoding.encodePath(event.feature.getGeometry().getArray());
} else {
encoded_geom = event.feature.getProperty('uniqgeom') || google.maps.geometry.encoding.encodePath(event.feature.getGeometry().getArray()[0].getArray())
}
event.feature.setProperty('encoded_geom', encoded_geom);
selectID = encoded_geom
$(".getSelectID").attr("id", selectID)
event.feature.setProperty('uniqid', uniqid);
});
function deleteSelectedShape() {
map.controls[google.maps.ControlPosition.TOP_RIGHT].clear()
if (selectedShape) {
map.data.forEach(function(feature) {
if (feature.getProperty('uniqid') == selectedShape.uniqid) {
map.data.remove(feature);
}
});
}
}
I believe the problem is a syntax error in
if (feature.getProperty('uniqid') == selectedShape.uniqid) {

Google maps - window.initialize is not a function

getting the above error when trying to load my map. Currently no map is displaying, and can't seem to find an answer anywhere! Any help would be greatly appreciated! My js code is as follows:
<script type="text/javascript" src = "/js/jquery-1.11.2.js">
var map = null;
var iLoadPoints = 0;
function initialize() {
var mapOptions = {
center: {lat: 54.872128, lng: -6.284874},
zoom: 13
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
jQuery(document).ready(function($){
$.getJSON('/markers/json', function (data) {
var locations = JSON.parse(data);
for (var i = 0; i < locations.length; i++) {
addMarker(locations[i].lat, locations[i].lng);
}
});
});
}
google.maps.event.addListenerOnce(map, 'idle', function () {
iLoadPoints += 1;
if (iLoadPoints === 2) {
initialize();
}
});
google.maps.event.addDomListener(window, 'load', function () {
iLoadPoints += 1;
if (iLoadPoints === 2) {
initialize();
}
});

Your jQuery(..)ready function is inside the initialize function. and you don't call the initialize function. this is wrong. It can't work.
I have comment the part dependent form your configuration and added the call to the initialize function for a brief test. (see below)
<script type="text/javascript" src = "/js/jquery-1.11.2.js">
var map = null;
var iLoadPoints = 0;
function initialize(){
var mapOptions = {
center: {lat: 54.872128, lng: -6.284874},
zoom: 13
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
jQuery(document).ready(function($){
/* $.getJSON('/markers/json', function (data) {
var locations = JSON.parse(data);
for (var i = 0; i < locations.length; i++) {
addMarker(locations[i].lat, locations[i].lng);
}
});*/
});
}
/* google.maps.event.addListenerOnce(map, 'idle', function () {
iLoadPoints += 1;
if (iLoadPoints === 2) {
initialize();
}
});
google.maps.event.addDomListener(window, 'load', function () {
iLoadPoints += 1;
if (iLoadPoints === 2) {
initialize();
}
});*/
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I think you must redesign your app.. movinge the part in jQuery..... function in a proper aree o function inside the initialize() function.

jquery ui maps empty markercluster

I have wrote this code to load markers from geojson and put it into markercluster. I'am not able to clear markercluster when the user select something else into dropdown list but clearMarkers() does nothing.
var markercluster;
$('#map_tracks').gmap({ 'center': '45.752051,6.295604', 'zoom': 12 }).bind('init', function(ev, map) {
$('#choose_tracks').change(function() {
var selected = $('#choose_tracks').val();
if ( selected != 'none' )
{
$("#map_tracks").gmap('clear', 'overlays');
$('#map_tracks').gmap('loadKML', 'sentier', 'http://example.com/media/kml/tracks/'+selected+'.kml');
$.getJSON( "http://example.com/media/geojson/tracks_poi/"+selected+".geojson").done(function( data ) {
if ( markercluster != undefined )
{
markercluster.clearMarkers();
}
$.each( data["features"], function( key, val ) {
var longitude = val["geometry"]["coordinates"][0];
var latitude = val["geometry"]["coordinates"][1];
var nom = val["properties"]["NOM"];
var type = val["properties"]["TYPE"];
$('#map_tracks').gmap('addMarker', {
'position': new google.maps.LatLng(latitude, longitude),
'icon':'http://example.com/media/kml/sentiers_img_poi/'+markersIcons[type]['name']
}).click(function() {
$('#map_tracks').gmap('openInfoWindow', { 'content': nom }, this);
});
});
markercluster = new MarkerClusterer(map, $('#map_tracks').gmap('get', 'markers'));
$('#map_tracks').gmap('set', 'MarkerClusterer', markercluster);
});
drawPath(selected);
}
});
});
How to clear markercluster ?

how to call 2 JavaScript methods in the same class?

i have this class with a few methods more code here JS Bin
var Maps = (function () {
function Maps() {
}
Maps.prototype.getCoord = function () {
navigator.geolocation.getCurrentPosition(this.onPositionSuccess, this.onPositionError);
};
Maps.prototype.getWatchCoord = function () {
var options = { enableHighAccuracy: true, timeout: 3000 };
navigator.geolocation.watchPosition(this.onWatchSuccess, this.onWatchError, options);
};
Maps.prototype.onPositionSuccess = function (position) {
var pos = {
'latitude' : position.coords.latitude,
'longitude' : position.coords.longitude
};
console.log(pos);
};
Maps.prototype.onWatchSuccess = function (position) {
var pos = {
'latitude' : position.coords.latitude,
'longitude' : position.coords.longitude
};
console.log(pos);
};
Maps.prototype.onWatchError = function (error) {
console.log(error.code);
};
Maps.prototype.onPositionError = function (error) {
console.log(error.code);
};
return Maps;
})();
var maps = new Maps();
maps.getCoord();
what i am trying to do is if getCoord() is a success then do a call to getWatchCoord() and compare the latitude and longitude. If they are the same don't run getWatchCoord()
Im trying to do this inside that Maps class if possible.
I've tried a few ways but it seems i cant call getWatchCoord() inside onPositionSuccess()
not i can set var x = navigator.geolocation.getCurrentPosition.... and then return pos; inside the success callback <- it wont return anything
Any ideas?

Are you using jQuery? If you are, then do this:
var Maps = (function () {
function Maps() {
}
Maps.prototype.getCoord = function () {
navigator.geolocation.getCurrentPosition($.proxy(this.onPositionSuccess, this), $.proxy(this.onPositionError, this));
};
Maps.prototype.getWatchCoord = function () {
var options = { enableHighAccuracy: true, timeout: 3000 };
navigator.geolocation.watchPosition($.proxy(this.onWatchSuccess, this), $.proxy(this.onWatchError, this), options);
};
Maps.prototype.onPositionSuccess = function (position) {
var pos = {
'latitude' : position.coords.latitude,
'longitude' : position.coords.longitude
};
console.log(pos);
//call getWatchCoord
this.getWatchCoord();
};
Maps.prototype.onWatchSuccess = function (position) {
var pos = {
'latitude' : position.coords.latitude,
'longitude' : position.coords.longitude
};
console.log(pos);
};
Maps.prototype.onWatchError = function (error) {
console.log(error.code);
};
Maps.prototype.onPositionError = function (error) {
console.log(error.code);
};
return Maps;
})();
var maps = new Maps();
maps.getCoord();
'this' will be global when entering the success callback if you do not pass a callback function that is scope with the right 'this' which is why I used $.proxy above. Now this is untested so I do not know what other problems you have here.