Uncaught RangeError: Maximum call stack size exceeded log - html

While plotting multiple markers on a Google map, I got an Uncaught RangeError: Maximum call stack size exceeded error message in the log for Ionic framework.
I am using a Cordova Google plugin for the map. Can anyone figure out where the error is in my code?
var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options);
var autocompleteto = new google.maps.places.Autocomplete(inputto,options);
google.maps.event.addListener(autocompleteFrom, 'place_changed', function() {
var bounds = new google.maps.LatLngBounds();
var place = autocompleteFrom.getPlace();
$rootScope.fromLat = place.geometry.location.lat();
$rootScope.fromLng = place.geometry.location.lng();
$rootScope.from = place.formatted_address;
$scope.placesfrom = $rootScope.from;
fromlat = $rootScope.fromLat;
fromlng = $rootScope.fromLng;
var Mapoptions ={
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
zoomControl:false,
draggable:true,
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:true
}
var googlemaphome = document.getElementById('googlemap-home');
var Map = new google.maps.Map(googlemaphome,Mapoptions);
var marker;
var markers = [
[fromlat,fromlng],
[28.6328,77.2197]
];
for(var i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
icon: 'img/marker.png',
map: Map
});
}
Map.fitBounds(bounds);
var boundsListener = google.maps.event.addListener((Map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
$scope.$apply();
});
`

I think the issue is here:
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
Since the subarrays in your markers[] array only have 2 elements, and the index for arrays starts at 0, I believe you should change this line to
var position = new google.maps.LatLng(markers[i][0], markers[i][1]); //use 0 and 1 instead of 1 and 2

Related

Algolia search, displaying all results even when radius set

So I want to search by lat and lng within 5km radius, despite limiting hits per page to 10, it is still displaying all markers on map and there are 96, why isn't this working properly?
var APPLICATION_ID = '**';
var SEARCH_ONLY_API_KEY = '**';
var INDEX_NAME = 'locations';
var PARAMS = { hitsPerPage: 10 };
// Client + Helper initialization
var algolia = algoliasearch(APPLICATION_ID, SEARCH_ONLY_API_KEY);
var algoliaHelper = algoliasearchHelper(algolia, INDEX_NAME, PARAMS);
algoliaHelper.setQueryParameter('aroundLatLng', '53.552472, -2.807663');
algoliaHelper.setQueryParameter('aroundRadius', 5000);
algoliaHelper.search();
// Map initialization
var markers = [];
//alert("heelo");
algoliaHelper.on('result', function(content) {
renderHits(content);
var i;
// Add the markers to the map
for (i = 0; i < content.hits.length; ++i) {
var hit = content.hits[i];
var marker = new google.maps.Marker({
position: {lat: hit.longitude, lng: hit.latitude},
map: map,
label: hit.slug,
animation: google.maps.Animation.DROP
});
markers.push(marker);
}
});
function renderHits(content) {
$('#container').html(JSON.stringify(content, null, 2));
}
});
How a very weird reason if I delete:
algoliaHelper.setQueryParameter('aroundLatLng', '53.552472, -2.807663');
algoliaHelper.setQueryParameter('aroundRadius', 5000);
algoliaHelper.search();
It still brings back all records, does anyone have a clue why is this happening?

Uncaught TypeError: Cannot read property 'getZoom' of undefined

I am new to Google Map , so please excuse if this a dumb question .
I am trying to Use Marker Cluster Option with Google Maps
This is my code
var map;
var global_markers = [];
var markers = [
[37.09024, -95.712891, 'trialhead0'],
[37.09024, -95.712891, 'trialhead1'],
[37.09024, -95.712892, 'trialhead2']
];
var infowindow = new google.maps.InfoWindow({});
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.77627, -73.910965);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addMarker();
}
function addMarker() {
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i][0]);
var lng = parseFloat(markers[i][1]);
var trailhead_name = markers[i][2];
var myLatlng = new google.maps.LatLng(lat, lng);
var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
});
marker['infowindow'] = contentString;
global_markers[i] = marker;
global_markers.push(marker);
google.maps.event.addListener(global_markers[i], 'click', function() {
infowindow.setContent(this['infowindow']);
infowindow.open(map, this);
});
}
}
var markerCluster = new MarkerClusterer(map, global_markers);
window.onload = initialize;
When i run this code , i am getting the following exception under browser console
Uncaught TypeError: Cannot read property 'getZoom' of undefined
This is my fiddle
http://jsfiddle.net/ZLuTg/1023/
How to resolve this ??
map is only instantiated in in the window onload handler, but it is passed to MarkerCluster constructor as an argument before it. That's why it's undefined.
Make sure MarkerCluster is constructed after map.
http://jsfiddle.net/ZLuTg/1025/

google maps onclick go to marker on map

I'm having issues trying to get my map to go to the marker of a location when a "View on Map" link is clicked. I keep getting the error "TypeError: map.setOptions is not a function".
Here's the code:
var infowindow = null;
function initialize(){
var myOptions = {
zoom:3,
center:new google.maps.LatLng(0,0),
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(
document.getElementById('map'),myOptions);
setMarkers(map,sites);
}
var infowindow = new google.maps.InfoWindow({
content:'Loading...'
});
var sites = [
['GIC Campers Sydney',-33.935477,151.012108,1,'xxx'],
['GIC Campers Brisbane',-27.5445735,153.0139405,1,'yyy'],
['GIC Campers Melbourne',-37.650735,144.940551,1,'zzz']
];
function setMarkers(map,markers){
var bounds = new google.maps.LatLngBounds();
var image = new google.maps.MarkerImage('/templates/home/images/google-pin.png',
new google.maps.Size(60,60),
new google.maps.Point(0,0),
new google.maps.Point(30,60));
for(var i=0;i<markers.length;i++){
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1],sites[2]);
var marker = new google.maps.Marker({
position:siteLatLng,
map:map,
icon:image,
title:sites[0],
zIndex:sites[3],
html:sites[4]
});
google.maps.event.addListener(marker,'click',function(){
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.setContent(this.html);
infowindow.open(map,this);
});
bounds.extend(siteLatLng);
map.fitBounds(bounds);
}
};
function loadcity(which){
initialize();
if(which == 'gic-campers-sydney'){
var newPos = new google.maps.LatLng(-33.935477,151.012108);
map.setOptions({center:newPos,zoom:15});
}
if(which == 'gic-campers-brisbane'){
var newPos = new google.maps.LatLng(-27.5445735,153.0139405);
map.setOptions({center:newPos,zoom:15});
}
if(which == 'gic-campers-melbourne'){
var newPos = new google.maps.LatLng(-37.650735,144.940551);
map.setOptions({center:newPos,zoom:15});
}
}
jQuery(document).ready(function(e) {
initialize();
jQuery('.updatemap').click(function(e){
e.preventDefault();
});
});
and an example link:
<a onclick="loadcity('gic-campers-brisbane');" class="updatemap" href="#gic-campers-brisbane">View on map</a>
Any help on this would be greatly appreciated.
Your map variable is local to the initialize function. It is not available inside the loadcity function.
One fix is to make it global (like your infowindow):
var infowindow = null;
var map = null;
function initialize(){
var myOptions = {
zoom:3,
center:new google.maps.LatLng(0,0),
mapTypeId:google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(
document.getElementById('map'),myOptions);
setMarkers(map,sites);
}
Not sure why you recreate the map (call initialize() every time loadcity runs), you really should only need to do that once.

Can someone tell me why I can see an InfoWindow when I click on an map marker?

Here is my code that will pull data from mysql and display the markers on the map. But I cant get the info windows to show when I click on a marker. Thank for any help.
The reference to the infowindows is at the very bottom on the page close to the end of the code after the ajax reference.
Thanks
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
function LoadMarkers(encodedString)
{
var bounds = new google.maps.LatLngBounds();
var stringArray = [];
stringArray = encodedString.split("****");
var x;
for (x = 0; x < stringArray.length; x = x + 1)
{
var addressDetails = [];
var marker;
addressDetails = stringArray[x].split("&&&");
var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
var image = new google.maps.MarkerImage(addressDetails[3]);
var marker = new google.maps.Marker({
map: map,
icon: image,
position: lat,
content: addressDetails[0]
});
markersArray.push(marker);
google.maps.event.addListener( marker, 'click', function () {
closeInfos();
var info = new google.maps.InfoWindow({content: this.content});
info.open(map,this);
infos[0]=info;
});
bounds.extend(lat);
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
map.fitBounds(bounds);
}
var geocoder;
var map;
var markersArray = [];
var infos = [];
geocoder = new google.maps.Geocoder();
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = null;//new google.maps.Map(document.getElementById("map_canvas"), myOptions);
jQuery(document).ready( function($){
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
LoadMarkers(document.getElementById("encodedString").value);
setInterval(function () {
jQuery.ajax({
url:'ajaxload.php',
type: "POST",
data: {'refreshed':true},
success: function(data)
{
LoadMarkers(data);
}
});
}, 10000);
//Manages the info windows
function closeInfos(){
if(infos.length > 0){
infos[0].set("marker",null);
infos[0].close();
infos.length = 0;
}
}
});
The function LoadMarkers is defined in global scope, but the function closeInfos is defined locally inside the $.ready-callback.
Because of that the call of closeInfos() inside the click-handler of the marker fails and stops the further execution of the click-handler.
You must make closeInfos global accessible:
window.closeInfos=function(){
if(infos.length > 0){
infos[0].set("marker",null);
infos[0].close();
infos.length = 0;
}
}

Close open InfoBubble when open a new (gMap v3)

I do not know what to do... I just want to close all opened infoBubbles if I'm going to open a new one. I am using the following code. Ideas? I tried a lot and googled a lot but it shouldn't be so complicated, should it? I thought to create an array and save id for the open one, but I think that there must be another, quite easier way to fix this.
$(document).ready(function(){
createmap();
function createmap(lat,lng){
var latlng = new google.maps.LatLng(50, 10);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
bounds = new google.maps.LatLngBounds();
createMarker();
}
function createMarker(){
var markers = [];
var cm = window.cm = new ClusterManager(
map,
{
objClusterIcon: new google.maps.MarkerImage('images/map/flag_cluster.png', false, false, false, new google.maps.Size(20,20)),
objClusterImageSize: new google.maps.Size(20,20)
}
);
var json = [];
var x1 = -85;
var x2 = 85;
var y1 = -180;
var y2 = 180;
for (var i=0; i<20; ++i) {
json.push(
'{'+
'"longitude":'+(x1+(Math.random()*(x2-x1)))+','+
'"latitude":'+(y1+(Math.random()*(y2-y1)))+','+
'"title":"test"'+
'}'
);
}
json = '['+json.join()+']';
// eval is ok here.
eval('json = eval(json);');
infos = [];
$.each(json, function(i,item){
var contentString = '<div id="content"><a onclick="createdetailpage('+i+');">'+item.title+'<br /></a></div>';
console.log(item.latitude);
var myLatlng = new google.maps.LatLng(item.latitude,item.longitude);
var marker = new google.maps.Marker({
position: myLatlng,
//map: map,
flat: true,
title:item.title,
//animation: google.maps.Animation.DROP,
//icon: myIcon
});
var infoBubble = new InfoBubble({
content: '<div class="phoneytext">'+contentString+'</div>'
});
google.maps.event.addListener(marker, 'click', function() {
if (!infoBubble.isOpen()) {
infoBubble.open(map, marker);
}
});
cm.addMarker(marker, new google.maps.Size(50, 50));
});
map.fitBounds(bounds);
}
});
The simplest approach to only have one infoBubble open is to only have one infoBubble and open it with different contents depending on the marker that is clicked.
InfoWindow example with custom markers (same concept applies to InfoBubble)
The InfoBubble is an OverlayView. As far as I can see, an overlaycomplete event is emitted when an overlay is added. Maybe all your InfoBubbles could listen to that event and close if the added overlay is a different one than "this".
It's just a thought, though, I haven't tried it myself. Feedback appreciated if you try it out!