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
Related
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 need to customize a map to look like this :
I was managed to add my own pointer icons and change the direction style to dots - but the default pointers are still appears....
Here is my Fiddle
Here what I've done so far :
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions),
directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
map: map
}),
markerA = new google.maps.Marker({
position: pointA,
map: map,
icon:'https://drive.google.com/uc?id=0B3RD6FDNxXbdVXRhZHFnV2xaS1E',
}),
markerB = new google.maps.Marker({
position: pointB,
map: map,
icon:'https://drive.google.com/uc?id=0B3RD6FDNxXbdM3E5clBqWDY5MWM',
});
I also would like to know how can i add the kilometers sum as a tooltip that keeps it's position relative to the route - like in the picture, any help will appreciated.
O.k - i got most of the stuff done, here is the result.
function initMap() {
var lineSymbol = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#3da6f9',
fillOpacity: 1,
anchor: new google.maps.Point(0,0),
strokeWeight: 0,
strokeOutline:2,
scale: 0.2
};
var pointA = new google.maps.LatLng(51.7519, -1.2578),
pointB = new google.maps.LatLng(50.8429, -0.1313),
myOptions = {
zoom: 7,
center: pointA
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
// Instantiate a directions service.
directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: '#426289',
strokeOpacity: 0.4,
strokeWeight: 5,
icons: [{
icon: lineSymbol,
offset: '0px',
repeat: '15px'
}]
},
suppressMarkers: true,
map: map
}),
markerA = new google.maps.Marker({
position: pointA,
icon: 'https://drive.google.com/uc?id=0B3RD6FDNxXbdVXRhZHFnV2xaS1E',
map: map
}),
markerB = new google.maps.Marker({
position: pointB,
icon: 'https://drive.google.com/uc?id=0B3RD6FDNxXbdM3E5clBqWDY5MWM',
map: map
});
// get route from A to B
calculateAndDisplayRoute(directionsService, directionsDisplay, pointA,
pointB);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay,
pointA, pointB) {
directionsService.route({
origin: pointA,
destination: pointB,
avoidTolls: true,
avoidHighways: false,
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
initMap();
And here is the Result
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 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 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,