Comments (12)
Hi there,
Yeah you should be able to call something along the lines of:
maps[0].map.getBounds();
from googlmapper.
Also, by default, maker clusters will appear, when at a certain zoom level, with a certain number of markers.
from googlmapper.
Sorry for the dumb question, but how should I use the getBounds?
If I understood correctly, I should:
1 - Just show the map, without any marker. But create a function eventAfterLoad.
2 - In this function I will call an API from the server (Ajax?), via javascript, passing the getBounds values.
3 - With the results, I will dinamically will add it using the google maps javascript functions.
Is this the correct way?
How about the clusters markers? My main concern on using it is that if I download all my markers at once, it will be huge the size of the response and will delay a lot to show them. Or not?
Cheers,
Joao
from googlmapper.
Yeah, that seems exactly the correct solution. An ajax event after load, to load items in the current view space.
Clusters wont aid in loading speed, as all markers are loaded initially, then replaced with clusters when a number appear in close proximity.
from googlmapper.
HI,
how can i get the map in modal box.I have a list of items with maps.I need to show on clicking the map icon to popup a modal box with appropriate map.
from googlmapper.
Hi,
You should be able to render a default map in a modal in HTML with the content hidden, when the map icon is clicked, you could unhide the map, and then fire a call to update the maps location.
var location = new google.maps.LatLng(45, 19);
// Change map position
maps[0].map.setCenter(location);
// Add a new marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(45, 19),
map: maps[0].map,
title: 'Hello World!'
});
// Add an information window
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!'
});
// Add an information window event
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(maps[0].map, marker);
});
from googlmapper.
Thank you so much for your replay.Its helped me a lot.But the issue is ..the modal is blank on first time.And we click for inspect element the map is reloading with the new parameters.
from googlmapper.
Would you be able to provide some of your code for me to look over.
from googlmapper.
Modal
Google Map
Javascript
$(document).ready(function(){
$('.modal-link').click(function(e){
e.preventDefault();
var data = $(this).data("id").split(',');
$('#myModal').modal('show');
var location = new google.maps.LatLng(data[0], data[1]);
maps[0].map.setCenter(location);
// Add a new marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[0], data[1]),
map: maps[0].map,
title: 'Hello World!'
});
// Add an information window
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!'
});
// Add an information window event
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(maps[0].map, marker);
});
});
});
from googlmapper.
I solved.Thank you for your support sir.Last few hours I was searching for the solution for getting the map in modal box.Your replay helped me to do the things.Many many thanks
from googlmapper.
Ah that's great, what was the solution?
from googlmapper.
I've updated the modal, for resizing the loaded new map, using the trigger method as follows
// Add an information window event
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(maps[0].map, marker);
});
google.maps.event.trigger(maps[0].map, "resize");
maps[0].map.setCenter(location);
from googlmapper.
Related Issues (20)
- Map Drag Event (Livewire) HOT 3
- Can you get lat/lng of clicked location? HOT 1
- Map not rendering when parent element is hidden HOT 1
- Map disappers when changing livewire model HOT 6
- gpx HOT 1
- Display KML/KMZ HOT 3
- Error Google Maps JavaScript API error: InvalidKeyMapError HOT 2
- Cornford\Googlmapper\Exceptions\MapperInstanceException No map found to add a polyline to. HOT 3
- Add new icon by click on the map view
- Drawing Layer (Library) HOT 1
- Laravel 9 support: illuminate/support v9.0? HOT 3
- Add listener 'click' on polyline ?
- DrawingManager Displayed twice based on React-18 upgrade HOT 1
- Re-rendering google
- eventClick on marker get Zoom
- Recenter Map With Livewire HOT 3
- labelClass doesnt work
- Bad Method Call Exception - Method Illuminate\Foundation\Application::share does not exist.
- Laravel 10 HOT 4
- Laravel 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from googlmapper.