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 });
}
}
Related
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 try to include a business on to my embedded map, however I could not do it for my life! :D
This is what I got so far:
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 47.7914, lng: 22.87691};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYMAPAPIlanguage=hu&callback=initMap">
</script>
and I want to include this business:
https://www.google.co.uk/maps/place/Boitor+Orsolya,+Cabinet+Medical+Individual/#47.7914061,22.8747236,17z/data=!3m1!4b1!4m12!1m6!3m5!1s0x473805cc6d46a92d:0x18460661870adb34!2sBoitor+Orsolya,+Cabinet+Medical+Individual!8m2!3d47.7914061!4d22.8769123!3m4!1s0x473805cc6d46a92d:0x18460661870adb34!8m2!3d47.7914061!4d22.8769123
All I can find online is using iframes, which I would avoid because of speed.
thanks
As a reference, this is what I want to achieve without iframes:
The only thing you need is to add your desired coordinates to add a marker and to center the map. Like here. You can also add a infoWindow to describe a little more what is on that place.
/*
* create map
*/
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.791846, 22.876955), // <--- I found these are the coordinates for the place you mentioned
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
/*
* create infowindow (which will be used by markers)
*/
var infoWindow = new google.maps.InfoWindow();
Check this link to see the map running
Use infoWindow
var map = new google.maps.Map(element, {
center: {lat: lat, lng: lng}, //location of the map center
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
//Location of your object
var pos = {
lat: lat,
lng: lng
};
infoWindow.setPosition(pos);
infoWindow.setContent('Business'); //Name of the infowindow
Here is what it would look like
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>
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
})
On the Google Maps javascript, there is a clickable link at the bottom left of the map with the Google icon to "See this area on Google Maps". This link opens up Google Maps, however, it only centers on the latitude/longitude provided and doesn't show the marker I provide to the API.
function initMap() {
map = new google.maps.Map(document.getElementById('gmap_holder'), {
center: {lat: 37.423021, lng: -122.083739},
zoom: 15
});
map.setOptions({draggable: false, zoomControl: true, scrollwheel: false, disableDoubleClickZoom: true});
var coord = new google.maps.LatLng(37.423021, -122.083739);
var marker = new google.maps.Marker({
position: coord,
map: map
});
}
I know there is a way to produce an URL that will show a marker, such an example would be http://maps.google.com/maps?q=loc:36.26577,-92.54324, but I can't seem to figure out from the API.
Should be:
function initMap() {
var center = {lat: 37.423021, lng: -122.083739};
var map = new google.maps.Map(document.getElementById('gmap_holder'), {
zoom: 4,
center: center
});
var marker = new google.maps.Marker({
position: center,
map: map
});
// you can set other options
}
More info:
You can find required properties here: MapOptions
Example: Simple markers
EDIT:
#Sefam, I edited your code because I saw some difference with example. I edited my answer to show where is the difference.
function initMap() {
var map = new google.maps.Map(document.getElementById('gmap_holder'), {
center: {lat: 37.423021, lng: -122.083739}, // or try:
// center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739),
zoom: 15
});
map.setOptions({draggable: false, zoomControl: true, scrollwheel: false, disableDoubleClickZoom: true});
var coord = new google.maps.LatLng(37.423021, -122.083739); // here you created instance of LatLng's class
var marker = new google.maps.Marker({
position: coord, // instead this try:
//position: {lat: 37.423021, lng: -122.083739}, // here is a difference; or try:
//position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739),
map: map
});
}
If it doesn't work check your api key and callback function:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Also check css rules: did you set height for your map?
Also I want to explain why I gave two variants of creating properties center and position:
center: {lat: 37.423021, lng: -122.083739}
center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739)
position: {lat: 37.423021, lng: -122.083739}
position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739)
In my practice I used both variants and both works.
Try combinations:
center: {lat: 37.423021, lng: -122.083739} //for var map
position: {lat: 37.423021, lng: -122.083739} //for var marker
center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) //for var map
position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) //for var marker
Hope my edited answer help you to find solution. Please, post error message from console if my answer doesn't help. With error message more easier to find solution.
PS. When I need to create Google Map I always use Google Maps APIs examples and it always works.