Comments (2)
Hi,
This currently isn't available in GooglMapper by default, however you could make use of the "eventAfterLoad" option to fire custom JavaScript.
Mapper::map(-33.9, 151.2, ['eventAfterLoad' => 'setMarkers(maps[0].map);']);
<script type="text/javascript">
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map) {
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// 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)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
from googlmapper.
works fine, many thanks for answering.
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.