I have created 3 markers using Google Maps API, but I only want one marker to be active at a time because each marker represents a scoring sequence in a game. For example, if the score is 0 I only want the Chicago marker to be active. I am lost on how to do this any help would be great. Here is some of my code:
<script>
var map;
var score;
function initMap() {
var chicago = {lat: 41.8781, lng: -87.6298};
var indianapolis = {lat: 39.7684, lng: -86.1581};
var oklahomaCity = {lat: 35.4819, lng: -97.5084};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.0, lng: 0.0},
zoom: 1
});
var chicagoMarker = new google.maps.Marker({
position: chicago,
map: map
});
var oklahomaCityMarker = new google.maps.Marker({
position: oklahomaCity,
map:map
});
var indianapolisMarker = new google.maps.Marker({
position: indianapolis,
map:map
});
chicagoMarker.setVisible(false);
indianapolisMarker.setVisible(false);
oklahomaCityMarker.setVisible(false);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuvsCAF0gVmwv6AF0SoA3xBjV66RG4r7o&callback=initMap"
async defer></script>
Create the marker withoou map attribute and the assugn with setMap(map) only if socre is 0
var map;
var score;
function initMap() {
var chicago = {lat: 41.8781, lng: -87.6298};
var indianapolis = {lat: 39.7684, lng: -86.1581};
var oklahomaCity = {lat: 35.4819, lng: -97.5084};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.0, lng: 0.0},
zoom: 1
});
var chicagoMarker = new google.maps.Marker({
position: chicago
});
var oklahomaCityMarker = new google.maps.Marker({
position: oklahomaCity
});
var indianapolisMarker = new google.maps.Marker({
position: indianapolis
});
if ( score == 0) {
chicagoMarker.setMap(map)
}
}
</script>
Related
I want to put markers to the specific cities that I chose but I need to do it in a for loop, manually going through the process is time-consuming and looks quite ugly on the code. Any tips to use a for loop correctly? What am I doing wrong here?
var izmir = {lat: 38.4237, lng: 27.1428};
var amsterdam = {lat: 52.3680, lng: 4.9036};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {zoom: 4,
center: izmir});
var map = new google.maps.Map(document.getElementById('map'), {zoom: 4,
center: amsterdam});
var i;
for(i=0;i.length;i++)
{
nokta = new google.maps.Marker({position: izmir,amsterdam, map: map});
}
}
EDIT: I guess I've partly achieved what I wanted, only problem is that the marker is only used by the last entry, in this case it's Prague. If I change it to another city (e.g. Amsterdam), map is centered on Amsterdam and the marker is only used by Amsterdam. How can I use the marker on all?
var sehirler = {
'izmir': {lat: 38.4237, lng: 27.1428},
'amsterdam': {lat: 52.3680, lng: 4.9036},
'prague': {lat: 50.0755, lng: 14.4378}};
function initMap() {
for (var sehir in sehirler)
{
var map = new google.maps.Map(document.getElementById('map'),
{zoom: 4, center: sehirler[sehir]});
var marker = new google.maps.Marker({position: sehirler[sehir], map: map});
}
}
EDITED based on discussion below
is this what you're looking for?
// initialize object containing all cities
var sehirler = {
izmir: { lat: 38.4237, lng: 27.1428 },
amsterdam: { lat: 52.368, lng: 4.9036 },
prague: { lat: 50.0755, lng: 14.4378 }
};
function initMap() {
// initialize main map
var center = sehirler.CITY // <-- edit CITY to be the correct city
var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: center });
// iterate throughout cities to put all markers on same map
for (var sehir in sehirler) {
var marker = new google.maps.Marker({ position: sehirler[sehir], map: map });
}
}
With the help of another StackOverflow post I've got a map working which makes the markers into clickable links.
I also need the markers to have a label of some kind so the user knows where they'll link to (right now, they're just blank pins) but I'm not sure how to modify this code to build that function in.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 53.618939, lng: -2.1602328}
});
var locations = [
["http://www.google.com", {lat: 53.618939, lng: -2.1601132}],
["http://www.google.com", {lat: 53.61953, lng: -2.1623746}],
["http://www.google.com", {lat: 53.6178993, lng: -2.1601596}],
["http://www.google.com", {lat: 53.5369545, lng: -1.9941523}],
["http://www.google.com", {lat: 53.5380496, lng: -1.9974085}],];
var markers = locations.map(function(location) {
var marker = new google.maps.Marker({
map: map,
position: location[1],
url: location[0] //Will be different for each marker
});
google.maps.event.addListener(marker, 'click', function(){
window.location.href = this.url;
});
return marker;
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
To label each marker with a unique letter (at least for up to 26 markers), you can follow this example in the documentation
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
var markers = locations.map(function(location) {
var marker = new google.maps.Marker({
map: map,
position: location[1],
label: labels[labelIndex++ % labels.length],
url: location[0] //Will be different for each marker
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
return marker;
});
proof of concept fiddle
code snippet:
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: 53.618939,
lng: -2.1602328
}
});
var locations = [
["http://www.google.com", {lat: 53.618939,lng: -2.1601132}],
["http://www.google.com", {lat: 53.61953,lng: -2.1623746}],
["http://www.google.com", {lat: 53.6178993,lng: -2.1601596}],
["http://www.google.com", {lat: 53.5369545,lng: -1.9941523}],
["http://www.google.com", {lat: 53.5380496,lng: -1.9974085}],
];
var markers = locations.map(function(location) {
var marker = new google.maps.Marker({
map: map,
position: location[1],
label: labels[labelIndex++ % labels.length],
url: location[0] //Will be different for each marker
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
return marker;
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>
When the initial page loads the map is displayed as it's supposed to be, but markers won't show up until page is refreshed once. Any insight would be greatly appreciated. Thanks in advance.
function initMap() {
var school = {lat: 38.901904, lng: -77.021457};
var map = new google.maps.Map(document.getElementById('map'), { zoom: 17,
center: school });
var marker = new google.maps.Marker({ position: school, map: map });
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer(map, markers, {imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: 38.901477, lng: -77.020735},
{lat: 38.901258, lng: -77.021539},
{lat: 38.903763, lng: -77.018829},
{lat: 38.900974, lng: -77.023124}
];
i want to make google maps marker from my json: http://devonder.pe.hu/api/index.php
i use factory like this
.factory('Markers', function($http) {
var markers = [];
return {
getMarkers: function(){
return $http.get("http://devonder.pe.hu/api/index.php").then(function(response){
markers = response;
return markers;
});
}
}
})
and my controller like this
.controller('mapsctrl', function() {
var myLatLng = {lat: 1.443306, lng: 125.182833};
var myLatLng2 ={lat: 1.440444, lng: 125.117778};
var fasilitas =Markers.getMarkers();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: myLatLng
});
var infoWindow = new google.maps.InfoWindow(), marker, i;
for( i = 0; i < fasilitas.length; i++ ) {
var obj=fasilitas[i];
// var gas[0];
var judul
var position = new google.maps.LatLng(obj.latitude, obj.longitude);
//bounds.extend(position);
//var myLatLngg = {lat: [3][1], lng: [3][2]};
var marker = new google.maps.Marker({
position: position,
map: map,
title: obj.nama,
icon: 'img/marker/'+obj.id_kategori +'.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var judul = fasilitas[i]
infoWindow.setContent('<h5>'+judul.nama+'</h5><b>Alamat: </b>'+judul.alamat+' <br><b>Buka: </b>'+judul.jadwal_praktek+' <br><b>No Telp: </b>'+judul.no_telp+' ');
infoWindow.open(map, marker);
}
})(marker, i));
}
})
and it's not work.
Looks like you are using the Markers factory without injecting it to your controller
app.controller('mapsctrl',['Markers', function(Markers){
var myLatLng = {lat: 1.443306, lng: 125.182833};
var myLatLng2 ={lat: 1.440444, lng: 125.117778};
var fasilitas =Markers.getMarkers();
--- Rest of your code ---
}]);
// or
app.controller('mapsctrl',function(Markers){
var myLatLng = {lat: 1.443306, lng: 125.182833};
var myLatLng2 ={lat: 1.440444, lng: 125.117778};
var fasilitas =Markers.getMarkers();
--- Rest of your code ---
});
The controller requests a $http and returns the value on success which is a promise so you should use it like this
.controller('mapsctrl', function() {
var myLatLng = {lat: 1.443306, lng: 125.182833};
var myLatLng2 ={lat: 1.440444, lng: 125.117778};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: myLatLng
});
Markers.getMarkers().then(function(fasilitas){
// var map = new google.maps.Map(document.getElementById('map'), {
// zoom: 16,
// center: myLatLng
// });
var infoWindow = new google.maps.InfoWindow(), marker, i;
for( i = 0; i < fasilitas.length; i++ ) {
var obj=fasilitas[i];
// var gas[0];
var judul
var position = new google.maps.LatLng(obj.latitude, obj.longitude);
//bounds.extend(position);
//var myLatLngg = {lat: [3][1], lng: [3][2]};
var marker = new google.maps.Marker({
position: position,
map: map,
title: obj.nama,
icon: 'img/marker/'+obj.id_kategori +'.png'
// visible : true
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var judul = fasilitas[i]
infoWindow.setContent('<h5>'+judul.nama+'</h5><b>Alamat: </b>'+judul.alamat+' <br><b>Buka: </b>'+judul.jadwal_praktek+' <br><b>No Telp: </b>'+judul.no_telp+' ');
infoWindow.open(map, marker);
}
})(marker, i));
}
});
});
I have created three markers using Google Maps API. Is there a way that I can add an event listener to each marker so that they will work independently when the corresponding marker is active? I would like to display a message if the user is getting closer to a marker, specifically with bounds_changed. I want to continue giving the user a message until they get to a zoom level of say 5.
<script>
var map;
var score;
score = 0;
function initMap() {
var chicago = {lat: 41.8781, lng: -87.6298};
var indianapolis = {lat: 39.7684, lng: -86.1581};
var oklahomaCity = {lat: 35.4819, lng: -97.5084};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.0, lng: 0.0},
zoom: 1
});
var chicagoMarker = new google.maps.Marker({
position: chicago,
});
var oklahomaCityMarker = new google.maps.Marker({
position: oklahomaCity,
});
var indianapolisMarker = new google.maps.Marker({
position: indianapolis,
});
if (score==0) {
chicagoMarker.setMap(map)
}
if (score==1) {
oklahomaCityMarker.setMap(map)
}
if (score==2) {
indianapolisMarker.setMap(map)
}
chicagoMarker.setVisible(false);
indianapolisMarker.setVisible(false);
oklahomaCityMarker.setVisible(false);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuvsCAF0gVmwv6AF0SoA3xBjV66RG4r7o&callback=initMap"
async defer></script>
try this
google.maps.event.addListener(chicagoMarker, 'click', function(){
//do something
})