This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 5 years ago.
Please help me How can I add multiple markers in this code? I searched a lot but I don't know how to add markers in this code? I am new in Google maps API. and sorry if I made any grammatical or spelling mistake in this question.
JS Code:
function initialize() {
var mapCenter = new google.maps.LatLng(52.5167, 13.3833);
$('#user_latitude').val(52.5167);
$('#user_longitude').val(13.3833);
var mapOptions = {
zoom: 3,
center: mapCenter,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
minZoom: 3,
scrollwheel: false
};
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
You can define an array inside your initialize function with all your marker:
var locations = [
['Marker 1', 41.0, 12.4],
['Marker 2', 47.0, 15.4],
...
];
First value can be the title, second the latitude and third longitude
Then you can create a loop to add markers
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
Example:
function initialize() {
var locations = [
['Marker 1', 41.0, 12.4],
['Marker 2', 47.0, 15.4],
];
var mapCenter = new google.maps.LatLng(52.5167, 13.3833);
$('#user_latitude').val(52.5167);
$('#user_longitude').val(13.3833);
var mapOptions = {
zoom: 3,
center: mapCenter,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
minZoom: 3,
scrollwheel: false
};
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
}
}
references: Simple markers | Google maps api, Adding multiple markers to Google Map
Related
I am trying to work with Google map marker clustering in Javascript. And i am pretty new to this.
The scenario
I am fetching a huge chunk of data from database in the lot of 10000 per call and then rendering the set on google map by sending the lat lng array to the marker cluster.
My data set consists of 100000 outlets. I am fetching 10000 outlets at once and this is being called 10 times so 10 clusters of 10000 are getting created and they are overlapping with each other. When i try to zoom in the cluster expands into further small clusters.
But while zooming out instead of the clustering back they overlap.
Issue- Need to get all the 100000 outlets in one cluster on zoom out .
or if that is not possible then how to fix the overlapping?
This is the code snippet
var mapDiv = document.getElementById('newmap');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(latitude, longitude),
zoom: 3,
panControl: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
},
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function addMarker1(locations, outletname, outletData) {
var infoWindow = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
});
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
// this is sending data 10000 each
for (var i = 0; i < outletDataLen; i++) {
outletArray.push(outletData[i]['Outletview']['name']);
j.push({
lat: parseFloat(outletData[i]['Outletview']['latitude']),
lng: parseFloat(outletData[i]['Outletview']['longitude'])
});
outletname.push(outletData[i]['Outletview']['name']);
}
addMarker1(j, outletname, outletData);
Take the markers from the MarkerCluster object and concat new Markers data with it and add it to the same Markerobject as below and also refer the API
var mapDiv = document.getElementById('newmap');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(latitude, longitude),
zoom: 3,
panControl: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
},
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markerCluster = new MarkerClusterer(map, [], {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
function addMarker1(locations, outletname, outletData) {
var infoWindow = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
});
});
var mapmarkers = markerCluster.getTotalMarkers();
markers = markers.concat(mapmarkers);
markerCluster.addMarkers(markers);
markerCluster.redraw();
}
// this is sending data 10000 each
for (var i = 0; i < outletDataLen; i++) {
outletArray.push(outletData[i]['Outletview']['name']);
j.push({
lat: parseFloat(outletData[i]['Outletview']['latitude']),
lng: parseFloat(outletData[i]['Outletview']['longitude'])
});
outletname.push(outletData[i]['Outletview']['name']);
}
addMarker1(j, outletname, outletData);
The solution is to clear the data before looping through the markers
if (markerCluster)
{
markerCluster.clearMarkers();
markerCluster.resetViewport();
markers = [];
markerCluster.removeMarker(new_arr);
}
I have a problem with that marker does not appear.
Map's styles ok, everything is ok except marker...
Here is the html and javascript code...
function initialize() {
var myLatLng = new google.maps.LatLng(45.431536, 4.380121);
var mapOptions = {
zoom: 14
, center: myLatLng
, disableDefaultUI: false
, scrollwheel: true
, navigationControl: true
, mapTypeControl: false
, scaleControl: true
, draggable: true
, mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas']
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(45.431536, 4.380121)
, animation: google.maps.Animation.BOUNCE
, icon: 'images/location_pin.png'
, title: 'ASL'
});
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(roadAtlasStyles, styledMapOptions);
map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}
google.maps.event.addDomListener(window, "load", initialize);});
Thank you for your help.
You are missing map attribute in your marker:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(45.431536, 4.380121)
, animation: google.maps.Animation.BOUNCE
, icon: 'https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/location-24-128.png'
, title: 'ASL'
, map : map
});
Also, you have a syntax error in this line:
google.maps.event.addDomListener(window, "load", initialize);});
Rewrite it to:
google.maps.event.addDomListener(window, "load", initialize);
JSFIddle: https://jsfiddle.net/t9pgsv6g/
I'm trying to display google map with markers and circles. The map and the circle is displaying correctly but the marker are not visible on the map.
Please suggest what changes i should make in my code.
<div id="mapview" style="width: 100%; height: 700px;">
</div>
<script>
var map;
var info_window;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918, -0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false
};
map = new google.maps.Map(document.getElementById('mapview'), mapOptions);
var image = '../Image/salemarker.png';
var user = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.561918, -0.31237799999996696),
animation: google.maps.Animation.DROP, icon: image
});
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 10 miles in metres
strokeColor: '#08355A;',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#fffff',
fillOpacity: 0.2,
});
info_window = new google.maps.InfoWindow({
content: 'loading'
});
user.setMap(null);
function addMarkersc() {
createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728, 51.5661728), '<p>48, The fairway, wembley, HA..</p>');
}
addMarkersc();
circle.bindTo('center', user, 'position');
map.fitBounds(circle.getBounds());
}
google.maps.event.addDomListener(window, 'load', initialize);
var image1 = '../Image/salemarker.png';
function createLocationOnMap(titulo, posicao, conteudo) {
var m = new google.maps.Marker({
map: map,
title: titulo,
icon: image1,
position: posicao,
html: conteudo
});
google.maps.event.addListener(m, 'mouseover', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
</script>
Your marker is out of view. It is at 51.5661728,51.5661728:
createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728,51.5661728), '<p>48, The fairway, wembley, HA..</p>');}
Your map is centered at 51.561918,-0.31237799999996696
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918,-0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};
working fiddle
You can try this
function InitializeMap1() {
geocoderMap = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(48.856614, 2.352222);
var myOptions =
{
zoom: 12,
minZoom: 12, // panControl: false, zoomControl: false, scaleControl: false, streetViewControl: true, //
center: latlng,
streetViewControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var arrayMain = [];
var markerLatLng = new google.maps.LatLng(48.856614, 2.352222);
var marker = new google.maps.Marker({
map: map,
position: markerLatLng,
center: markerLatLng
});
arrayMain.push(marker);
}
Try like this:
<div id="mapview" style="width: 100%; height: 700px">
<script>
var map;
var info_window;
function addMarkersc() {
var titulo = '4 bed semi detached For sale';
var posicao = new google.maps.LatLng(51.5661728,51.5661728);
var conteudo = '<p>48, The fairway, wembley, HA..</p>';
var image = '../Image/salemarker.png';
var m = new google.maps.Marker({
map: map,
title: titulo,
icon: image,
position: posicao,
html: conteudo
});
google.maps.event.addListener(m, 'mouseover', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918,-0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};
map = new google.maps.Map(document.getElementById('mapview'),mapOptions);
var image = '../Image/salemarker.png';
var user = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.561918,-0.31237799999996696),
animation: google.maps.Animation.DROP,
icon: image
});
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 10 miles in metres
strokeColor: '#08355A;',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#fffff',
fillOpacity: 0.2,
});
info_window = new google.maps.InfoWindow({
content: 'loading'
});
user.setMap(null);
circle.bindTo('center', user, 'position');
map.fitBounds(circle.getBounds());
addMarkersc();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I am struggling with the marker on a custom map. The map centers on the right place, but the marker doesn't show up on that place. Someone has the same problem already solved?
Thank you a lot for your help!
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
scrollwheel: false,
zoom: 16,
center: new google.maps.LatLng(51.840164,4.33244),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
}
}
var map = new google.maps.Map(map_canvas, map_options)
}
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
map: map_canvas
});
}
var features = [
{
position: new google.maps.LatLng(51.840164,4.33244),
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
google.maps.event.addDomListener(window, 'load', initialize);
You need to call your addMarker function in the initialize function so the markers are added after the map is initialized, not before. You have 2 options for initializing the map property of the marker either 1. make it global or 2. pass it in to the addMarker function (as below). Also note that map_canvas is a HTML DOM element, not a google.maps.Map, the name of that variable is "map".
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
scrollwheel: false,
zoom: 16,
center: new google.maps.LatLng(51.840164,4.33244),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
}
}
var map = new google.maps.Map(map_canvas, map_options)
var features = [
{
position: new google.maps.LatLng(51.840164,4.33244),
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature, map);
}
}
function addMarker(feature, map) {
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You are missing to add the marker to the map.
Either use marker.setMap(map) or pass it via marker properties as you try to do.
But in your code the map and map_canvas variables are not in the global scope, this means your addMarker function cannot add it and map: map_canvas is null
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
**map: map_canvas**
});
You would have to slightly change your code to pass the map into the addMarker function.
How can I use MarkerClusterer in the Google Maps API? I tried to use it, but it's not working.
My code is written as follow.
function InitializeMap(lat, lng, location, username, town, is_paid) {
var myOptions;
var latlng = new google.maps.LatLng(lat, lng);
if (is_paid != "True") {
myOptions = {
zoom: 10,
center: latlng,
scrollwheel: false,
streetViewControl: false,
//navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
//scaleControl: false,
navigationControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
else {
myOptions = {
zoom: 10,
center: latlng,
scrollwheel: true,
streetViewControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map(document.getElementById('map'), myOptions);
var mcOptions = {gridSize: 100, maxZoom: 10};
generateMarkers(location, is_paid);
generateUserMarker(lat, lng, username, town, is_paid);
alert(groupMarkers.length);
var mc = new MarkerClusterer(map, groupMarkers, mcOptions);
//mc.addMarkers(groupMarkers,true);
alert("hello");
}
function generateMarkers(locations, is_paid) {
var marker
for (var i = 0; i < locations.length; i++) {
createMarker(new google.maps.LatLng(locations[i][0], locations[i][1]), locations[i][2], locations[i][3], is_paid);
}
}
function createMarker(pos, name, town, is_paid) {
var infowindow;
var marker = new google.maps.Marker({
position: pos,
map: map, // google.maps.Map
title: name,
icon: "images/red.png"
});
groupMarkers.push(marker);
}