I am trying to convert a very long javascript code into one single "for loop: from point A to Point B, what did i do wrong? this is a to call a google map marker, each markers are using a different content and position, but they share same icons, shadows... Point A below:
var mappro1 = new google.maps.Marker({
position: map1,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"c",
zIndex: 4
});
var mappro2 = new google.maps.Marker({
position: map2,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"c",
zIndex: 4
});
var mappro3 = new google.maps.Marker({
position: map3,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"c",
zIndex: 4
});
var mappro4 = new google.maps.Marker({
position: map4,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"c",
zIndex: 4
});
var mappro5 = new google.maps.Marker({
position: map5,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"c",
zIndex: 4
});
var mappro6 = new google.maps.Marker({
position: map6,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"c",
zIndex: 4
});
var mappro7 = new google.maps.Marker({
position: map7,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"c",
zIndex: 4
});
var mappro8 = new google.maps.Marker({
position: map8,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"c",
zIndex: 4
});
var mappro9 = new google.maps.Marker({
position: map9,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"c",
zIndex: 4
});
Point B below:
for ($i=1; $i <10; $i++){
var $mappros = "mappro" + $i;
var $mappos = "map" + $i;
var mappros = new google.maps.Marker({
position: $mappos,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"$i",
zIndex: $i
});
};
That is my variant of the loop according to code in A:
var mappros = [];
for (var $i = 1; $i < 10; $i++){
var mappro = new google.maps.Marker({
position: "map" + $i,
map: map,
icon: companyImage,
shadow: companyShadow,
title: "c",
zIndex: 4
});
mappros.push(mappro);
};
So, you'll get an array of mappro to access any of then via the index. If you need a separate name for each mappro you shoud replace the title line with this:
title: $i,
Related
I want the marker to be detected and display a value that is assigned to a rectangle. Through research, I found this, but it is not applicable in my case as I only need a latlong point. I have found something similar to what I want and tried it out, which is here
But it does not seem to work in my case.
I have a rectangle below:
var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: -37.822802,
south: -37.822260,
east: 145.036010,
west: 145.035324
}
});
And I tried to insert a point, which is -37.822545, 145.035526, and this point is within the rectangle, and it is supposed to return true but it wasn't.
Here is my JSfiddle
Looks like the LatLngLiteralBounds input for google.maps.Rectangle is broken. It creates a rectangle with north and south reversed. With your original rectangle (north: -37.822802, south: -37.822260), I get:
NE1:-37.822802,145.03601 (north=-37.822802, incorrect)
SW1:-37.82226,145.035324 (south=-37.82226, incorrect)
Whereas if I create the rectangle with a google.maps.LatLngBounds object, I get:
NE2:-37.82226,145.03601 (north=-37.82226, correct)
SW2:-37.822802,145.035324 (south=-37.822802, correct)
proof of concept fiddle
(blue markers are NE/SW of rectangle2, red markers are NE/SW of rectangle1.)
someone should create an issue in the issue tracker
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 19,
center: {
lat: -37.82280243352756,
lng: 145.0353240966797
},
mapTypeId: 'terrain'
});
var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: -37.822802,
south: -37.822260,
east: 145.036010,
west: 145.035324
}
});
var rectangle2 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(-37.822802, 145.035324), // SW
new google.maps.LatLng(-37.822260, 145.036010)) // NE
});
var marker = new google.maps.Marker({
map: map,
position: {
lat: -37.822545,
lng: 145.035526
},
title: "-37.822545, 145.035526"
});
var NEmark1 = new google.maps.Marker({
map: map,
position: rectangle1.getBounds().getNorthEast(),
title: "NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue()
});
var SWmark1 = new google.maps.Marker({
map: map,
position: rectangle1.getBounds().getSouthWest(),
title: "SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue()
});
var NEmark2 = new google.maps.Marker({
map: map,
position: rectangle2.getBounds().getNorthEast(),
title: "NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue(),
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
var SWmark2 = new google.maps.Marker({
map: map,
position: rectangle2.getBounds().getSouthWest(),
title: "SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue(),
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
map.fitBounds(rectangle1.getBounds());
console.log(rectangle1.getBounds().toUrlValue());
console.log("NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue());
console.log("SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue());
document.getElementById('contains').innerHTML = "rectangle1 bounds.contains=" + rectangle1.getBounds().contains({
lat: -37.822545,
lng: 145.035526
});
console.log(marker.getPosition().toUrlValue());
console.log(rectangle2.getBounds().toUrlValue());
console.log("NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue());
console.log("SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue());
console.log(rectangle2.getBounds().contains({
lat: -37.822545,
lng: 145.035526
}));
document.getElementById('contains').innerHTML += " rectangle2 bounds.contains=" + rectangle2.getBounds().contains({
lat: -37.822545,
lng: 145.035526
});
console.log(rectangle2.getBounds().contains(marker.getPosition()));
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
height: 95%;
width: 100%;
}
<div id="contains"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
I think you just mixed up your north and south parameters. (A larger negative latitude number is further south than a smaller one)
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 19,
center: {
lat: -37.82280243352756,
lng: 145.0353240966797
},
mapTypeId: 'terrain'
});
var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
south: -37.822802, // This is further south ...
north: -37.822260, // than this
east: 145.036010,
west: 145.035324
}
});
alert(rectangle1.getBounds());
alert(rectangle1.getBounds().contains({lat:-37.822545, lng:145.035526}));
}
With north and south switched like this, the js-fiddle returns true.
I am drawing a flightPath in my web application using GOOGLE MAPS API. I have to draw this path between two geo points, each geo point hast its own latitude and longitude value. Since I am new to google APIS I need an advice how can I set zoom and center of GOOGLE MAP? so that it can properly be viewed in a web view. Initially, I am using API in this way
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: <?= $from_lat ?>, lng: <?= $from_lng ?>},
mapTypeId: 'terrain'
});
var iconBase = 'https://image.ibb.co/ieFup6/pin.png';
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
marker1 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: {lat: <?= $to_lat ?>, lng: <?= $to_lng ?>}
});
marker2 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: {lat: <?= $from_lat ?>, lng: <?= $from_lng ?>}
});
var flightPlanCoordinates = [
{lat: <?= $to_lat ?>, lng: <?= $to_lng ?>},
{lat: <?= $from_lat ?>, lng: <?= $from_lng ?>}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#504e60',
strokeOpacity: 0,
strokeWeight: 3,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
});
flightPath.setMap(map);
}
The result is showing following out put
I need this zoom level could be fair enough so that I could be visible on mobile screens properly. As I an increasing the zoom it is pulling the map to the center( as I have set up under the zoom).
Advice Required
How can I define center between two points?
How to set zoom level?
You can try using the LatLngBounds class to which you add any/all latlng coordinates you wish to include before calling the fitBounds method.
function initMap() {
var points={
to:{
lat:<?= $to_lat ?>,
lng:<?= $to_lng ?>
},
from:{
lat:<?= $from_lat ?>,
lng:<?= $from_lng ?>
}
}
var bounds = new google.maps.LatLngBounds();
var latlng=new google.maps.LatLng( points.from.lat, points.from.lng );
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: latlng,
mapTypeId: 'terrain'
});
var iconBase = 'https://image.ibb.co/ieFup6/pin.png';
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
var latlng=new google.maps.LatLng( points.to.lat, points.to.lng );
bounds.extend( latlng );
marker1 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: latlng
});
var latlng=new google.maps.LatLng( points.from.lat, points.from.lng );
bounds.extend( latlng );
marker2 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: latlng
});
var flightPlanCoordinates = [
{lat: points.to.lat, lng: points.to.lng },
{lat: points.from.lat, lng: points.from.lng }
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#504e60',
strokeOpacity: 0,
strokeWeight: 3,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
});
flightPath.setMap( map );
map.fitBounds( bounds );
}
or, a slightly simplified version of the above
function initMap() {
var points={
from:new google.maps.LatLng( <?= $from_lat ?>,<?= $from_lng ?> ),
to:new google.maps.LatLng( <?= $to_lat ?>,<?= $to_lng ?> )
}
var bounds = new google.maps.LatLngBounds();
bounds.extend( points.to );
bounds.extend( points.from );
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: points.from,
mapTypeId: 'terrain'
});
var iconBase = 'https://image.ibb.co/ieFup6/pin.png';
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
marker1 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: points.to
});
marker2 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: points.from
});
var flightPlanCoordinates = [
points.to,
points.from
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#504e60',
strokeOpacity: 0,
strokeWeight: 3,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
});
flightPath.setMap( map );
map.fitBounds( bounds );
}
how can I add title google maps but for marker
important : marker will vary by user
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable: true,
map: map,
title: ????
});
try this
var marker = new google.maps.Marker({
position: myCenter,
label: 'Your Shop Name',
animation: google.maps.Animation.BOUNCE
});
I have a couple (or allot) markers in my Maps API. All these markers belong to a certain group, like 'home'. And some of them are visible and some are not. I wanna change the visible true/false of a whole group of markers at once using a DOM event. An ONCLICK button event that calls a JS to be specific.
So far, I've unable to find or come up with any way of solving my problem. I hope anyone can help me out.
<div id="map" class="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 52.0000, lng: 5.0000},
mapTypeId: 'terrain'
});
var marker14 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: true
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={API-KEY}&callback=initMap"></script>
In reply to #MrUpsidown
Where is your "onclick" button?
What function does it trigger?
Clicking in this link changes the menu on my page, and where {!!!something-here!!} is I think should be a script that changes the visibility of a certain group.
How do you add your "many" markers to the map?
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 52.0000, lng: 5.0000},
mapTypeId: 'terrain'
});
var marker14 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: true
});
var marker16 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: false
});
var marker4 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: true
});
var marker20 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'work',
visible: true
});
var marker8 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'work',
visible: false
});
}
</script>
What have you tried?
"I've unable to find or come up with any way of solving my problem."
Add every marker to an array. In the function triggered by the button click, loop through your markers array. For each marker, check if it belongs to the group you are interested in and if yes, call setVisible(true).
var markers = [];
function initMap() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 5,
center: {
lat: 53,
lng: 4.5
}
});
var marker1 = new google.maps.Marker({
position: {
lat: 51.9335,
lng: 4.2212
},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: false
});
var marker2 = new google.maps.Marker({
position: {
lat: 52.9135,
lng: 4.1212
},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: false
});
var marker3 = new google.maps.Marker({
position: {
lat: 53.9135,
lng: 4.5212
},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: true
});
var marker4 = new google.maps.Marker({
position: {
lat: 51.8835,
lng: 4.9912
},
map: map,
title: '2017-02-02 13:27:30',
group: 'work',
visible: true
});
var marker5 = new google.maps.Marker({
position: {
lat: 53.9135,
lng: 5.4212
},
map: map,
title: '2017-02-02 13:27:30',
group: 'work',
visible: false
});
markers.push(marker1);
markers.push(marker2);
markers.push(marker3);
markers.push(marker4);
markers.push(marker5);
}
function setHomeGroupVisible() {
for (var i = 0; i < markers.length; i++) {
if (markers[i].group === 'home') {
markers[i].setVisible(true);
}
}
}
initMap();
#map-canvas {
height: 150px;
}
button {
margin-top: 15px;
background: yellow;
}
<div id="map-canvas"></div>
<button onclick="setHomeGroupVisible()">
Set Home Group Visible
</button>
<script src="//maps.googleapis.com/maps/api/js"></script>
I'm trying to add two markers to a map. Here's the code:
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
visible: true,
icon: 'images/pin-1.png'
});
//add the extra marker
newPos = new google.maps.LatLng(lat2, lng2)
marker = new google.maps.Marker({
position: newPos,
map: map,
visible: true,
icon: 'images/pin-2.png'
});
My question is, is it possible to make one of the markers point to the right, so it doesn't get hidden behind the first? Something like this:
Marker 1
Marker 2 ____
____ | |
| | |____|
| |> o o
|____|
Any help anyone can give is appreciated!
You can make SVG icons, and rotate them. The code below surrounds the "point" with 4 arrows each pointing at it from a cardinal direction:
var marker0 = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5
},
draggable: true,
map: map
});
var marker1 = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 5,
rotation: 90,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
var marker2 = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 5,
rotation: -90,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
var marker3 = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
rotation: 180,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
Example code snippet:
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker0 = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5
},
draggable: true,
map: map
});
var marker1 = new google.maps.Marker({
position: map.getCenter(),
icon: {
strokeColor: 'green',
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 5,
rotation: 90,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
var marker2 = new google.maps.Marker({
position: map.getCenter(),
icon: {
strokeColor: 'red',
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 5,
rotation: -90,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
var marker3 = new google.maps.Marker({
position: map.getCenter(),
icon: {
strokeColor: 'blue',
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
rotation: 180,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
/* var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
}); */
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas" style="height:100%;width:100%;"></div>
Google Map uses the longitude and latitude to position the marker. As of today, no such parameters in the Map API to align the pointer.
You can change your custom icons to align the pointers. make sure you have some transparent space on the other side, as the image placed on center.
I haven't tried to do anything like this, but I can suggest to play with origin property og Icon object https://developers.google.com/maps/documentation/javascript/reference#Icon