Develop Reference

to realize clustering on the GoogleMap

How to realize clustering of markers on the map? Help me clear errors. necessary scripts are connected. Error: enter image description here
function CustomMarker(latlng, map, imageSrc) {
this.latlng_ = latlng;
this.imageSrc = imageSrc;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
...
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 17,
center: new google.maps.LatLng(48.42216, 44.31308),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var data = [{
profileImage: "./images/1.jpg",
pos: [48.42217, 44.31308]
}, {
profileImage: "./images/2.jpg",
pos: [48.42220, 44.31308]
}];
for(var i=0;i<data.length;i++){
new CustomMarker(new google.maps.LatLng(data[i].pos[0],data[i].pos[1]), map, data[i].profileImage)
}
var markerCluster = new MarkerClusterer(map, data,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

Please find this code snippet might help your cause.
function initialize(markers) {
map = new google.maps.Map(document.getElementById('main-map'), {
zoom:3,
center: new google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
for (var i = 0; i < markers.length; i++) {
var image = '/Festool/media/Festool%20Images/Festool%20Icons/location-icon.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i].Latitude, markers[i].Longitude),
map: map,
icon:image,
title: 'Click to zoom'
});
var infowindow = new google.maps.InfoWindow({
maxWidth: 250,
});
mar.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent( ContentString(i));
infowindow.open(map, marker);
}
})(marker, i));
}
}

Set marker in the callback function where user's position is available after creating the map

I made a function that display nearest hotels in google map.my code is as follow.
var map;
function initMap() {
var latlng = new google.maps.LatLng(28.535516,77.391026);
if (navigator.geolocation) {
try {
navigator.geolocation.getCurrentPosition(function(position) {
var myLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
setPos(myLocation);
});
} catch (err) {
var myLocation = {
lat: 25.2048,
lng: 55.2708
};
setPos(myLocation);
}
} else {
var myLocation = {
lat: 25.2048,
lng: 55.2708
};
setPos(myLocation);
}
}
function setPos(myLocation) {
map = new google.maps.Map(document.getElementById('map'), {
center: myLocation,
zoom: 10
});
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: myLocation,
radius: 4000,
types: ['hotels']
}, processResults);
}
function processResults(results, status, pagination) {
if (status !== google.maps.places.PlacesServiceStatus.OK) {
return;
} else {
createMarkers(results);
}
}
function createMarkers(places) {
var bounds = new google.maps.LatLngBounds();
var placesList = document.getElementById('places');
for (var i = 0, place; place = places[i]; i++)
{
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
animation: google.maps.Animation.DROP,
position: place.geometry.location
});
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
}
html,body {
margin: 0;
padding: 0;
}
#map {
height: 500px;
margin: 10px auto;
width: 800px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuBzeYkYimIquGG5KkIcB6vFmtHMUzDFo&libraries=places&callback=initMap" async defer></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuBzeYkYimIquGG5KkIcB6vFmtHMUzDFo&libraries=places"></script>
<div id="map"></div>
Above Example Returns me nearest hotels around user location. but i wants to also display users location pointer.
So how can i show users location here.
i also try by custom adding in initMap() function to show users location marker but it OVERRIDE with Hotels icons. so when i refresh page first for microseconds user location shows and than hotels icon will override that.
here is my image with o/p of above code.
Output of Fiddle Snippet

Add the creation of the marker to the setPos function (where the geolocation results are available and the map has been create.
proof of concept fiddle
when geolocation fails:
when geolocation works, it shows my current location.
code snippet:
var map;
function error() {
console.log("error!")
var myLocation = {
lat: 25.2048,
lng: 55.2708
};
setPos(myLocation);
}
function initMap() {
var latlng = new google.maps.LatLng(28.535516, 77.391026);
if (navigator.geolocation) {
try {
navigator.geolocation.getCurrentPosition(function(position) {
var myLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
setPos(myLocation);
}, error);
} catch (err) {
var myLocation = {
lat: 25.2048,
lng: 55.2708
};
setPos(myLocation);
}
} else {
var myLocation = {
lat: 25.2048,
lng: 55.2708
};
setPos(myLocation);
}
}
function setPos(myLocation) {
map = new google.maps.Map(document.getElementById('map'), {
center: myLocation,
zoom: 10
});
var marker = new google.maps.Marker({
position: myLocation,
map: map,
title: "My Position"
})
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: myLocation,
radius: 4000,
types: ['hotels']
}, processResults);
}
function processResults(results, status, pagination) {
if (status !== google.maps.places.PlacesServiceStatus.OK) {
return;
} else {
createMarkers(results);
}
}
function createMarkers(places) {
var bounds = new google.maps.LatLngBounds();
var placesList = document.getElementById('places');
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
animation: google.maps.Animation.DROP,
position: place.geometry.location
});
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#map {
height: 100%;
margin: 10px auto;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>
<div id="map"></div>

multiple custom markers (icons) with different infowindows

I'm creating a map where I will be adding multiple custom markers, and I want each of them to have different infowindows.
The thing is that every marker has a different icon (those numbered dots you see in the image), and this is an example that is not explained on the GoogleMaps API code samples. I mean, they explain you how to create infowindows, but only in the case you are using the variable marker, and not for the variable icons. Therefore, I don't know where should I add the code for the infowindow. The website looks like this:
website screenshot
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
backgroundColor: '#000000',
center: new google.maps.LatLng(41.404998, 2.210517),
mapTypeId: 'roadmap',
streetViewControl: false,
});
var iconBase = 'images/numbers/';
var icons = {
001: {
icon: iconBase + '01.png'
},
002: {
icon: iconBase + '02.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002
//Barcelona 2
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
};
}
</script>

try using closure this way
var features = [
{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002
//Barcelona 2
}
];
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
var infowindow = new google.maps.InfoWindow()
var content = "" + feature.type
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
you could change features this way
var features = [
{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001,
message: 'my firts message in info window'
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002,
message: 'my second message in info window'
//Barcelona 2
}
];
or you can add a new property
you should use
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
var infowindow = new google.maps.InfoWindow()
var content = "" + feature.message
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));

Answering Josep last question if I may (I'm new in Stack Overflow so please forgive my imprecisions), I updated the fiddle http://jsfiddle.net/t7trcpv2/1/, adding to the 'feature' object a 'title' property where you can input your own data
var map;
var infowindow;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
backgroundColor: '#000000',
center: new google.maps.LatLng(41.404998, 2.210517),
mapTypeId: 'roadmap',
streetViewControl: false,
});
infowindow = new google.maps.InfoWindow();
var iconBase = 'images/numbers/';
var icons = {
001: {
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
},
002: {
icon: "http://maps.google.com/mapfiles/ms/micons/green.png"
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map,
});
// must be a string (or a DOM node).
var content = "" + feature.title
google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
return function(evt) {
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, content, infowindow));
}
var features = [{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001,
title:'title1'
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002,
title: 'title2'
//Barcelona 2
}];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
};
}
google.maps.event.addDomListener(window, "load", initialize);

First create marker on google maps take too much time

I'm using the google maps API V3 in javascript and Vue.js for my application and i have found a strange bug, when i click the first time to put a marker on the map, the web app froze during 1-3seconds. Here is my code:
var vueMap = new Vue({
el: '#map-canvas',
data: {
infowindow: new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
}),
marker: null
},
ready:function(){
this.initialize();
},
methods: {
createMarker: function (latlng, name, html, point1, map) {
var distanceKm = google.maps.geometry.spherical.computeDistanceBetween(point1, latlng);
distanceKm = distanceKm/1000;
distanceKm = distanceKm.toFixed(2);
var contentString = "Distance en KM ---- " + distanceKm + '<br/>Score de 123';
// HERE IS WHERE THE FROZE HAPPEN
this.marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
// TODO onclick
google.maps.event.addListener(this.marker, 'click', function() {
this.infowindow.setContent(contentString);
this.infowindow.open(map,this.marker);
}.bind(this));
google.maps.event.trigger(this.marker, 'click');
return this.marker;
},
initialize: function () {
var styles = [/*some style*/];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(48.815145,2.244830),
new google.maps.LatLng(48.902137, 2.417864)
);
var point1 = new google.maps.LatLng(48.858230, 2.372566);
var center = bounds.getCenter();
var x = bounds.contains(center);
var mapOptions = {
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
},
center: center,
zoom: 1,
minZoom: 13,
streetViewControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
};
console.log(document.getElementById('map-canvas'));
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var lastValidCenter = map.getCenter();
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
google.maps.event.addListener(map, 'center_changed', function() {
if (bounds.contains(map.getCenter())) {
// still within valid bounds, so save the last valid position
lastValidCenter = map.getCenter();
return;
}
// not valid anymore => return to last valid position
map.panTo(lastValidCenter);
});
google.maps.event.addListener(map, 'click', function(event) {
//call function to create marker
if (this.marker != null) {
this.marker.setMap(null);
this.marker = null;
}
this.marker = vueMap.createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng, point1, map);
}.bind(this));
}
}
});
module.exports = vueMap;
It's longer on Chrome than with Firefox and Safari...
Does someone knows why ? (Or have a clue about it ?)
Thanks in advance

street view and googlemaps

Im trying to solve a problem. I have a map locating parking and would like to put the street view. I got a place, but the array of "locations" does not work completely. The map shows only the last array in the street view (ps: you must click the icon to display the street view)
http://www.clicrbs.com.br/sites/swf/paulMapa/mapspaul.html
function initialize() {
var pinkParksStyles = [
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},
{
featureType: "poi.park",
stylers: [
{ hue: "#ff0023" },
{ saturation: 40 }
]
}
];
var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
{name: "Paul em Floripa"});
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(-27.619279,-48.527896),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP,'pink_parks','satellite' ],
streetViewControl: true
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker();
var infowindow = new google.maps.InfoWindow();
var kmlLayer = new google.maps.KmlLayer('http://www.clicrbs.com.br/sites/swf/paulMapa/trajetoComum.kml');
var locations = [
['Estacionamento 1', -27.626216,-48.526806, 1],
['Estacionamento 2', -27.622654,-48.528102, 2],
['Estacionamento 3', -27.618236,-48.528598, 3],
['Estacionamento 4', -27.615011,-48.529491, 4],
['Estacionamento 5', -27.613015,-48.532554, 5],
['Estacionamento 6', -27.612033,-48.534453, 6],
['Estacionamento 7', -27.611326,-48.530995, 7],
['Estacionamento 8', -27.613811,-48.527514, 8],
];
var pano = null;
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
icon: 'images/stopcar.png',
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i ) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i))
google.maps.event.addListener(infowindow, 'domready', function() {
if (pano != null) {
pano.unbind("position");
pano.setVisible(false);
}
pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
navigationControl: true,
enableCloseButton: true,
addressControl: true,
linksControl: false,
});
pano.bindTo("position", marker);
pano.setVisible(true);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
pano.unbind("position");
pano.setVisible(true);
pano = null;
});
}
kmlLayer.setMap(map);
map.mapTypes.set('pink_parks', pinkMapType);
map.setMapTypeId('pink_parks');
map.setStreetView(pano);
}
​

I decided
function initialize() {
var pinkParksStyles = [
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},
{
featureType: "poi.park",
stylers: [
{ hue: "#ff0023" },
{ saturation: 40 }
]
}
];
// Create the map
// No need to specify zoom and center as we fit the map further down.
var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
{name: "Paul em Floripa"});
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(-27.619279,-48.527896),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP,'pink_parks','satellite' ],
streetViewControl: true
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var kmlLayer = new google.maps.KmlLayer('http://www.clicrbs.com.br/sites/swf/paulMapa/trajetoComum.kml');
// Define the list of markers.
// This could be generated server-side with a script creating the array.
var markers = [
{ lat:-27.626216, lng:-48.526806, name:"Estacionamento 1"},
{ lat:-27.622654, lng:-48.528102, name:"Estacionamento 2"},
{ lat:-27.618236, lng:-48.528598, name:"Estacionamento 3"},
{ lat:-27.615011, lng:-48.529491, name:"Estacionamento 4"},
{ lat:-27.613015, lng:-48.532554, name:"Estacionamento 5"},
{ lat:-27.612033, lng:-48.534453, name:"Estacionamento 6"},
{ lat:-27.611326, lng:-48.530995, name:"Estacionamento 7"},
{ lat:-27.613811, lng:-48.527514, name:"Estacionamento 8"},
];
// Create the markers ad infowindows.
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
// Create the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
icon: 'images/stopcar.png',
map: map,
});
// Create the infowindow with two DIV placeholders
// One for a text string, the other for the StreetView panorama.
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.name;
content.appendChild(title);
var streetview = document.createElement("DIV");
streetview.style.width = "400px";
streetview.style.height = "400px";
content.appendChild(streetview);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is loaded in the DOM.
google.maps.event.addListenerOnce(infowindow, "domready", function() {
var panorama = new google.maps.StreetViewPanorama(streetview, {
navigationControl: true,
enableCloseButton: true,
addressControl: true,
linksControl: false,
visible: true,
position: marker.getPosition()
});
});
}
// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
map.mapTypes.set('pink_parks', pinkMapType);
map.setMapTypeId('pink_parks');
kmlLayer.setMap(map);
}