I have added google maps API of JavaScript in angular 2.
Added custom markers on the map according to positions fetched from API.
I have displayed list of positions on UI. After click on position I want to replace that position's corresponding marker icon and reset all other icons.
Following code is not working as expected.
I have added this function to place markers on map:
placeMarkers(markers: any, infoWindowContent: any) {
// Display multiple markers on a map
let infoWindow = new google.maps.InfoWindow();
let bounds = new google.maps.LatLngBounds();
let marker;
// Loop through our array of markers & place each one on the map
for(let i = 0; i < markers.length; i++ ) {
let position = new google.maps.LatLng(<number>markers[i].lat, <number>markers[i].lang);
bounds.extend(position);
marker = new google.maps.Marker(<google.maps.MarkerOptions>{
position,
map: this.map,
title: markers[i].name,
icon: this.iconUrl,
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i]);
infoWindow.open(this.map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
this.map.fitBounds(bounds);
}
}
And this code to replace marker of selected position:
selectSite(site: any, index: any) {
this.placeMarkers(this.finalMarkers, this.finalInfoWindowContent);
let selection = this.finalMarkers.find(function(item) {
return item.name == site.Name
});
let infowindow = new google.maps.InfoWindow();
let position = new google.maps.LatLng(<number>selection.lat, <number>selection.lang);
let redMarker = new google.maps.Marker(<google.maps.MarkerOptions>{
position: position,
map: this.map,
title: selection.name,
icon: {url: require('../../../assets/img/red-marker.png'), scaledSize: {height: 30, width: 20}}
});
redMarker.addListener('click', function() {
infowindow.setContent(selection.name);
infowindow.open(this.map, redMarker);
});
}
Above code is working fine initially, but got stuck after multiple location changes.
Any help is very much appreciated!
**You can Set Following marker**
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
This is how I did it.
I simply did it outside google maps and it works great.
https://youtu.be/2cA3pQQoEr8
Related
Hi i building a store locator and i found this code online its workind fine
function generateMarkers(points) {
//var iconBase = "https://media.nisbets.com/static/content/banners/";
for (var i = 0; i < points.length; i++) {
var place = points[i];
var myLatLng = new google.maps.LatLng(place[0], place[1]);
var marker = new google.maps.Marker({
position: myLatLng,
name: place[2],
clickable: true,
map: map,
icon: /*iconBase + */"nisbets_storelocator_marker.png",
url: place[3]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
setMapBounds(marker.getPosition());
markers.push(marker);
}
}
But instead of a link who redirect to a page i want a popup window with the place info inside the popup.
Please i need your help how to add the infoWindow to my code.
Thanks
Define a new InfoWindow
var infowindow = new google.maps.InfoWindow({
content: contentString
});
Add an event listener to each marker to open the InfoWindow.
marker.addListener('click', function() {
infowindow.open(map, marker);
});
Reference: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
I'm using the lastest version of google maps, and trying to print the markers in the map.
To do that, I'm using:
function initmap2() {
map2 = new google.maps.Map(document.getElementById('map-scan'), {
zoom: 16,
styles: style,
center: { lat: 13.7218501, lng: -89.2039192 }
});
for (i = 0; i < positions.length; i++) {
markers = new google.maps.Marker({
position: new google.maps.LatLng(positions[i]),
map: map2
});
}
var markers = positions.map(function (location, i) {
return new google.maps.Marker({
position: location,
});
});
for (var i = 0; i < markers.length; i++) {
markers[i].info = new google.maps.InfoWindow({
content: '<b>' + positions[i]["title"].toUpperCase() + '</b>'
});
markers[i].info.open(map2, markers[i]);
}
}
The markers are displayed in the right position, but the InfoWindws are very distanced of them.
Why I'm using map2 instead of map. I have preloaded another googlemap and the map2 is loaded in a dialog (on demand, when the dialog is open)
How to fix this behavior?
Your problem is this... you loop over positions, creating a marker for each of your positions:
for (i = 0; i < positions.length; i++) {
markers = new google.maps.Marker({
position: new google.maps.LatLng(positions[i]),
map: map2
});
}
You then do the same thing again:
var markers = positions.map(function (location, i) {
return new google.maps.Marker({
position: location,
});
});
And at the end of this 2nd way of doing it, markers is an array of markers. Which you then loop over to setup the infowindows.
However, the first time you created the marker, you specified the map attribute. So those markers show up on the map.
The second time you didn't bother, so these markers aren't on the map.
You've got markers visible thanks to your first way of doing it. But then you're attaching the infowindows to the non-visible markers created the second way! :-/
The code's a bit of a mess, you can do it all in just the one loop over positions, and make sure you specify the map property for each marker. I'd just do:
var markers = [];
for (i = 0; i < positions.length; i++) {
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(positions[i]),
map: map2
}));
markers[i].info = new google.maps.InfoWindow({
content: '<b>' + positions[i]["title"].toUpperCase() + '</b>'
});
markers[i].info.open(map2, markers[i]);
}
I receive json data from a server and need to add them to a google map. It works fine, however, I only see one marker and I assume every time I add a marker it changes it to new coordinates and doesnt add an extra marker. How can I define markers as an array?
$.getJSON(url, function(data) {
var entry = data.feed.entry;
$(entry).each(function(){
for (var prop in this["gsx$instruments"]) {
//alert(this["gsx$instruments"][prop]);
listContacts(this["gsx$instruments"][prop])
var myLatLng = {lat: Number(this["gsx$ycor"][prop]), lng: Number(this["gsx$xcor"][prop])};
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 13,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: this["gsx$instruments"][prop]
});
}
// Column names are name, age, etc.
//$('.results').prepend('<h2>'+this.gsx$instruments.$t+'</h2><p>'+this.gsx$type.$t+'</p>');
});
});
Add a new function addMarker and use that function to include markers also keep the map variable outside the ajax call as well. updated code below
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 13,
center: {lat: LAT, lng: LONG}
});
function addMarker(position, map, title){
var marker = new google.maps.Marker({
position: position,
map: map,
title: title
});
}
$.getJSON(url, function(data) {
var entry = data.feed.entry;
$(entry).each(function(){
for (var prop in this["gsx$instruments"]) {
//alert(this["gsx$instruments"][prop]);
listContacts(this["gsx$instruments"][prop])
var myLatLng = {lat: Number(this["gsx$ycor"][prop]), lng: Number(this["gsx$xcor"][prop])};
addMarker(myLatLng,map,this["gsx$instruments"][prop]);
}
// Column names are name, age, etc.
//$('.results').prepend('<h2>'+this.gsx$instruments.$t+'</h2><p>'+this.gsx$type.$t+'</p>');
});
});
Essentially, you first need to add the markers to an array of markers
Suppose you have JSON providing the markers and supposing each marker has a name and coordinates attributes
function formatMarkers (){
// Loop through all of the JSON entries provided in the response
for (var i = 0; i < markersArray.length; i++) {
var markers = markersArray[i];
// Create popup windows for each record
var contentString = '<p><b>Name</b>: ' + markers.name + '</p>';
// Converts each of the JSON records into Google Maps Location format
formattedMarkers.push({
latlon: new google.maps.LatLng( markers.coordinates[1], markers.coordinates[0] ),
message: new google.maps.InfoWindow({
content: contentString,
maxWidth: 320
}),
username: markers.name
});
}
return formattedMarkers;
}
Then you need to render each of them
formattedMarkers.forEach(function (n) {
var marker = new google.maps.Marker({
position: n.latlon,
map: map,
icon: icon
});
// For each marker created, add a listener that checks for clicks
google.maps.event.addListener(marker, 'click', function () {
// When clicked, open the selected marker's message
n.message.open(map, marker);
});
marker.setMap(map);
}
I hope I've been helpful.
I've looked at all the suggestions from previously asked questions similar to mine, as well as following the google maps api developers info page on overlays, but no answers have helped - I'm trying to simply change the color of the markers from the standard to green, but every time I try and add fillColor, etc. to my code it either won't show the marker or won't show the map at all. Anyone have any idea what I'm doing wrong?
function createMap() {
// map options
var options = {
zoom: 4,
center: new google.maps.LatLng(39.909736, -98.522109), // centered US
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
// init map
map = new google.maps.Map(document.getElementById('map_canvas'), options);
}
function addMarker() {
fetchNewQuote();
var indext;
for (indext = 0; indext <array.length; ++indext) {
splitarr = array[indext].split(":");
geosplit = splitarr[1].split(", ");
if (indext < 50) {
$('#tweet_table').append(array[indext] + "</br></br>");
}
var marker = new google.maps.Marker({
position: new google.maps.LatLng(geosplit[0], geosplit[1]),
map: map,
title: 'Click me to see what this individual tweeted!'
});
(function(marker, splitarr, indext) {
var tweetclick = "TOBACCO VISUALIZATION</br>" + "Keyword: " + splitarr[0] + "</br> Coordinates: " + splitarr[1] + "</br> Tweet: " + splitarr[2];
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: tweetclick
});
infowindow.open(map, marker);
});
})(marker, splitarr, indext);
marker.setMap(map);
markersArray.push(marker);
}
}
You can load your own marker like this :
var icon = https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|00FF00
You have to pass the color of the marker at RGB format after the pipe. If you want a blue marker, just pass 0000FF instead of 00FF00.
Then, use it like this :
var marker = new google.maps.Marker({
position: new google.maps.LatLng(geosplit[0], geosplit[1]),
map: map,
title: 'Click me to see what this individual tweeted!'
icon: icon
});
Hope this helps !
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Google Maps - Multiple markers - 1 InfoWindow problem
I'm making a map where I plot some towns and places.
As you will see, when you click on a marker, you are redirected to the corresponding page. But now I would like to put the link and some other information in an info bubble popover. So, I've edit my code to this:
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5],});
marker[i] = marker;
google.maps.event.addListener(marker[i], 'click', function() {
infobulle.open(map, marker);
});
}
}
But as you can see here the info bubble stays "blocked" on the last location. I really don't know how to sort this.
I have the same result with this :
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4]});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}
Last version :
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
processBeach(locations[i]);
}
}
function processBeach(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4]});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}
You are using the marker variable for two different purposes it seems. One is as a single marker, and one as an array of markers. But you don't need an array of markers, if you use closures. Try this:
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
(function(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}(locations[i]));
}
}
By the way you also had a spurious comma at the end of the options array for google.maps.Marker which will cause problems in some browsers.
EDIT
If you don't want to use closures, this is equivalent:
function processBeach(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
processBeach(locations[i]);
}
}
Have a look at my jSFiddle here. The code you are missing is
On Click you need to fetch the current infoWindow from the map and then update it with new information
If you want to keep windows open and close when people want to close then you have to set a toggle kind of variable so each window will be created on click and then when someone click on close it will go away. But i think you only need to complete first part.
The code you should look in my fiddle is from line 120 to 150 which does check for infowindow if it exists and then do open the same window on new marker so it moves from old marker and go to new. if you keep creating new windows the old ones will not close magically.
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}}); // Get current info window
if (infowindow){ // if infoWindow is there then use it else create new
infowindow.open(map, marker);
infowindow.setContent(context.data.ht);
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data.ht}
}
});
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
}