Goal: I want to display Multiple Markers and InfoWindow against Adress.
Searching got me to this code, shows Multiple Markers and InfoWindow against Lang & Lat
but in my case there will be address array that i have...
What function google provides to convert adress into lat , lang
var markers = [
{ lat: -33.85, lng: 151.05, name: "marker 1" },
{ lat: -33.90, lng: 151.10, name: "marker 2" },
{ lat: -33.95, lng: 151.15, name: "marker 3" },
{ lat: -33.85, lng: 151.15, name: "marker 4" }
];
//this puts lat and lng.. but i have array of Address's
// Create the markers
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
icon: '/images/shorticon_13.png',
title: data.name
});
google.maps.event.addListener(marker, "click", function () {
openInfoWindow(marker);
});
}
AM newbie to Google maps API v3...
Thanks in advance
Geocoding is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers or position the map.
If you have more than about 10 addresses, you will run into the rate limit/quota. For known addresses, it is better to geocode them offline and use the coordinates to display them on page load (like your example).
Related
I have Google Maps embedded on Vue JS code. But I want to show multiple markers using latitude and longitude on that map. Any idea on how to do that?
Here is my code.
Maps.vue
<template>
<card type="plain" title="Google Maps">
<div id="map" class="map">
</div>
</card>
</template>
<script>
export default {
mounted() {
let myLatlng = new window.google.maps.LatLng(40.748817, -73.985428);
let mapOptions = {
zoom: 13,
center: myLatlng,
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
styles: [{
"elementType": "geometry",
"stylers": [{
"color": "#1d2c4d"
}]
},
{
"elementType": "labels.text.fill",
"stylers": [{
"color": "#8ec3b9"
}]
},
{
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#1a3646"
}]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#4e6d70"
}]
}
]
};
let map = new window.google.maps.Map(
document.getElementById("map"),
mapOptions
);
let marker = new window.google.maps.Marker({
position: myLatlng,
title: "Hello World!"
});
marker.setMap(map);
}
};
</script>
How can I display multiple markers on this google map? Any advice or tips would be really helpful. Thanks.
You can use the gmap-vue plugin for VueJS to add multiple markers by clicking on the map.
First, initialize your Google Map, and make sure to add an array of markers: [] that will contain all the markers that you will be adding on the map:
<template>
<div>
<gmap-map
:center="center"
ref="mmm"
:zoom="12"
style="width: 100%; height: 400px"
#click="addMarker"
>
<gmap-marker
:key="index"
v-for="(m, index) in markers"
/>
</gmap-map>
</div>
</template>
export default {
name: "GoogleMap",
data() {
return {
center: { lat: 45.508, lng: -73.587 },
markers: [],
};
},
};
You can add markers by calling the #click="addMarker" event on <gmap-map>. Then, on the your methods you can add the addMarker(event) function where you should be able to get the click coordinates from the map. You can now
Here is what it looks like:
methods: {
addMarker(event) {
const marker = {
lat: event.latLng.lat(),
lng: event.latLng.lng(),
};
console.log(marker);
this.markers.push({ position: marker });
this.$refs.mmm.panTo(marker);
//this.center = marker;
},
},
Here is a working codesandbox for your reference, just put your API key on the main.js file: https://codesandbox.io/s/gifted-fast-b41ps
You can use- but you don't need any plug-in. It doesn't really save time in this use-case imho.
With the standard implementation it would look something like that:
this.yourPOIs.forEach(poi => {
var myLatLng = { lat: poi.latitude, lng: poi.longitude };
var marker = new google.maps.Marker({
position: myLatLng,
map: this.myMap,
title: poi.annotation
// you can also add data here with key names that are not in use like for example "uuid: 1" so you can access that data later on if you click on markers or iterate through them
});
marker.addListener('click', function() {
console.log(marker.uuid); // if you want to react on clicking on a marker
});
this.addedMarkers.push(marker);
});
myMap being the map object written in a local variable instead of writing it in a let-variable (you will probably need to access the map later on so you better safe them in the local data of the component or your vuex store).
That's also why i pushed the markers in an array of the component. By that you can later on do this to delete the markers again (for e.g. updating the map):
this.addedMarkers.forEach(marker => {
marker.setMap(null);
});
I am using Vue to build a site that takes in some data and displays a google map with markers and circles around the points with the markers.
So far I can create the map with markers perfectly fine, however I have no idea what the proper way to create a circle is with the Vue2-google-maps package, despite having combed through the Documentation for a long time.
Here is the code so far
<GmapMap
:center="center"
:zoom="10"
class="google-map">
<GmapMarker
:key="index"
v-for="(pin, index) in markers"
:position="pin.position"
:icon="pin.icon"
:clickable="true"
:draggable="true"
#click="center=pin.position">
</GmapMarker>
<GmapCircle
:key="index"
v-for="(pin, index) in markers"
:center="pin.position"
:radius="1000"
:visible="true"
:fillColor="red"
:fillOpacity:="1.0">
</GmapCircle>
</GmapMap>
Note that markers is a list of markers that is created somewhere else in the code.
If you take out the tags, the code works perfectly fine placing all the markers. I just need to know what the proper tag/object set is for creating a circle.
You are on the right track, GmapCircle component in vue2-google-maps library is intended for creating circles on the map. There are might be several reasons why circles are not getting displayed:
center property value is invalid, the supported format is {lat: <lat>, lng: <lng>} or google.maps.LatLng value
maybe you could not spot them due to relatively small size (given the provided 2 kilometer diameter, they could be easily missed)?
Regarding fillColor and fillOpacity properties, they need to be passed via options property, e.g. :options="{fillColor:'red',fillOpacity:1.0}"
Anyway the following example demonstrates how to create circles on map via vue2-google-maps
<GmapMap :center="center" :zoom="zoom" ref="map">
<GmapCircle
v-for="(pin, index) in markers"
:key="index"
:center="pin.position"
:radius="100000"
:visible="true"
:options="{fillColor:'red',fillOpacity:1.0}"
></GmapCircle>
</GmapMap>
export default {
data() {
return {
zoom: 5,
center: { lat: 59.339025, lng: 18.065818 },
markers: [
{ Id: 1, name: "Oslo", position: { lat: 59.923043, lng: 10.752839 } },
{ Id: 2, name: "Stockholm", position: { lat: 59.339025, lng: 18.065818 } },
{ Id: 3, name: "Copenhagen", position: { lat: 55.675507, lng: 12.574227 }},
{ Id: 4, name: "Berlin", position: { lat: 52.521248, lng: 13.399038 } },
{ Id: 5, name: "Paris", position: { lat: 48.856127, lng: 2.346525 } }
]
};
},
methods: {}
};
in my case, i had error that saw:" GmapCircle not define component", so i have used this code:
<gmap-circle
v-for="(infoWindow, index) in arrayMarkers"
:key="'circle_'+index"
radius="100"
:center="infoWindow.position"
/>
I'm going to initalize infowindows (for google map markers) through angular controller (i'm using ng-map module)
NgMap.getMap().then (map) ->
$scope.map = map
for marker in markers
latLng = new (google.maps.LatLng)(marker.latitude, marker.longitude)
#initialize infoWindows through google map api, not ng-map module
contentString = 'is an example string'
infoWindow = new (google.maps.InfoWindow)(content: contentString)
$scope.dynMarkers.push new (google.maps.Marker)(position: latLng)
marker.addListener 'click', ->
infoWindow.open map, marker
$scope.markerClusterer = new MarkerClusterer(map,$scope.dynMarkers, {})
I have an error in console:
marker.addListener is not a function
I can't use an ng-map 'infowindow' DOM element in my view.
What's wrong?
marker object needs to be of google.maps.Marker type, try to replace:
$scope.dynMarkers.push new (google.maps.Marker)(position: latLng)
marker.addListener 'click', ->
infoWindow.open map, marker
with
markerObject = new (google.maps.Marker)(position: latLng) #<-Marker object
$scope.dynMarkers.push markerObject
markerObject.addListener 'click', ->
infoWindow.open map, markerObject
Example
angular.module('mapApp', ['ngMap'])
.controller('mapController', function ($scope, NgMap) {
NgMap.getMap().then(function (map) {
$scope.map = map;
$scope.dynMarkers = [];
$scope.markers.forEach(function (marker) {
var latLng = new google.maps.LatLng(marker.latitude, marker.longitude);
var contentString = 'is an example string'
var infoWindow = new (google.maps.InfoWindow)({ content: contentString });
var dynMarker = new google.maps.Marker({ position: latLng });
$scope.dynMarkers.push(dynMarker);
google.maps.event.addListener(dynMarker, 'click', function () {
infoWindow.open(map,dynMarker);
});
});
var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
$scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, mcOptions)
});
$scope.markers = [
{ id: 1, name: 'Oslo', latitude: 59.923043, longitude: 10.752839 },
{ id: 2, name: 'Stockholm', latitude: 59.339025, longitude: 18.065818 },
{ id: 3, name: 'Copenhagen', latitude: 55.675507, longitude: 12.574227 },
{ id: 4, name: 'Berlin', latitude: 52.521248, longitude: 13.399038 },
{ id: 5, name: 'Paris', latitude: 48.856127, longitude: 2.346525 }
];
});
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
<ng-map default-style="true" zoom="3" center="59.339025, 18.065818">
</ng-map>
</div>
I am using Angular and leaflet and want to build a map with different markers, eg.: ships and bridges. I want to update them individually without removing and setting all markers again. So when I have new ships, I just want to call the ship markers, update them and the bridge markers stay the same.
Right now, I tried something like this:
angular.module('angularMapApp')
.controller('MainCtrl', ['$scope', 'RequestService', 'setShipMarkers', '$q', function($scope, RequestService, setShipMarkers, $q) {
angular.extend($scope, {
hamburg: {
lat: 53.551086,
lng: 9.993682,
zoom: 13
},
markers: {
ships: {
m1: {
lat: 42.20133,
lng: 2.19110
},
m2: {
lat: 42.21133,
lng: 2.18110
}
},
bridges: {
m3: {
lat: 42.19133,
lng: 2.18110
},
m4: {
lat: 42.3,
lng: 2.16110
}
}
},
defaults: {
tileLayer: 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
zoomControlPosition: 'topright',
tileLayerOptions: {
opacity: 0.9,
detectRetina: true,
reuseTiles: true,
},
scrollWheelZoom: false
}
});
But this does not works, as I get the following error (after setting markers-nested: true in my view):
You must add layers to the directive if the markers are going to use
this functionality.
However why do I need layers, if I just want to call different markers group on the same layer. I just do not want to update all of them at once.
So maybe someone can tell me, how to get separate marker groups and how to call them to update them.
For each kind of nested marker you have to create its own group layer like this, they can be empty:
layers: {
overlays: {
ships: { // use the same name as in the marker object
name: "Ships",
type: "group",
visible: true
},
bridges: { // use the same name as in the marker object
name: "bridges",
type: "group",
visible: true
}
}
}
By doing that you will also have to move the OSM base layer into the layers.baselayers object, but markers-nested="true" works this way.
Demo: http://plnkr.co/edit/HQx8bQmmsFUGcLxYt95N?p=preview
Currently, I am displaying 500-600 Markers on Google map, with their names as tooltip. Now,
I need to display the tool-tip of all overlapping markers as comma-separated i.e. Marker1, Marker2, Marker3 etc. if Marker1, Marker2, Marker3 are overlapped on map.
I found many other different examples on google map at internet especially at GeoCodeZip, but not of my requirement.
if this requirement is once filled, Am afraid of performance issues on zoom changed events, as tooltip needed to be updated (if overlapping is changed).
Update1 : I have already show Overlapping Marker spiderfier to client but not acceptable.
Does anyone have right path or working example ?
Thanks
-Anil
The core of this is to find the pixel distance between LatLngs. Then before adding each marker check the pixel distance between it and any existing markers. If there is another marker nearby add to the title otherwise create a new marker. jsFiddle
function init() {
var mapOptions = {
center: new google.maps.LatLng(0, -0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
// to get the pixel position from the latlng
// https://stackoverflow.com/questions/1538681/how-to-call-fromlatlngtodivpixel-in-google-maps-api-v3
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
google.maps.event.addListenerOnce(map, 'idle', function() {
if (overlay.getProjection()) {
var points = [
{ latlng: new google.maps.LatLng(40, -100), title: '1' },
{ latlng: new google.maps.LatLng(40.125, -100.125), title: '2' },
{ latlng: new google.maps.LatLng(40.25, -100.25), title: '3' },
{ latlng: new google.maps.LatLng(40.5, -100.5), title: '4' },
{ latlng: new google.maps.LatLng(40.75, -100.75), title: '5' },
{ latlng: new google.maps.LatLng(41, -101), title: '6' },
{ latlng: new google.maps.LatLng(35, -95), title: '7' },
{ latlng: new google.maps.LatLng(45, 105), title: '8' },
{ latlng: new google.maps.LatLng(25, -115), title: '9' },
{ latlng: new google.maps.LatLng(55, -85), title: '10' },
{ latlng: new google.maps.LatLng(30, -34), title: '11' }
];
// for each point
var markers = [];
points.forEach(function (point) {
var nearby = false;
var pointPixelPosition = overlay.getProjection().fromLatLngToContainerPixel(point.latlng);
markers.forEach(function(marker) {
var markerPixelPosition = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition());
// check for marker 'near by'
if (Math.abs(pointPixelPosition.x - markerPixelPosition.x) < 10 || Math.abs(pointPixelPosition.y - markerPixelPosition.y) < 10) {
nearby = true;
marker.setTitle(marker.getTitle() + ', ' + point.title);
}
});
// create new marker
if (!nearby) {
markers.push(new google.maps.Marker({ map: map, position: point.latlng, title: point.title }));
}
});
}
map.setCenter(new google.maps.LatLng(39.8282, -98.5795));
});
}