Develop Reference

google map is rendered with multiple rounded tiles

map is devided into 3x3 tiles
I want to remove all the spaces and rounded corners so the map looks as if it is one full map without any divisions into tiles, maybe there is some kind of map tile atribute that I can modify to make it look like a normal map, below is my code
function initMap() {
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({
map: map
}),
markerA = new google.maps.Marker({
position: pointA,
title: "point A",
label: "A",
map: map
}),
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "B",
map: map
});
google.maps.event.trigger(map, 'resize');
// get route from A to B
calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
directionsService.route({
origin: pointA,
destination: pointB,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
swal("не удалось загрузить карту");
}
});
}
initMap();

the tiles of the map are effected by img styling, I changed my css to bypass the map styling and it solved my issue

How to set center and zoom drawing a flight path through a google map api (Js & php)

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 );
}

Google Maps marker pointing right

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

Markers are not visible in google map

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>

Google map geolocator polyline edit color

site app which takes the user from it's current position and gives destination details to a specific point. And I have two problems. First I cannot figure out how I change the polyline color between the two points. The default is blue but I cannot seem to override it.
Also how do I get rid of the markers once the destination has been generated?
Where do I put this snippet in the code below for it to work?
var polylineOptions = {
strokeColor:"#FF0000",
strokeOpacity: 1,
strokeWeight: 2,
zIndex: 5
}
And heres the rest of the google map js.
var directionsService = new google.maps.DirectionsService(),
directionsDisplay = new google.maps.DirectionsRenderer(),
createMap = function (start) {
var travel = {
origin: (start.coords) ? new google.maps.LatLng(start.lat, start.lng) : start.address,
destination: customPosition,
travelMode: google.maps.DirectionsTravelMode.DRIVING
// Exchanging DRIVING to WALKING above can prove quite amusing :-)
},
map = new google.maps.Map(document.getElementById("map"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("map-directions"));
directionsService.route(travel, function (result, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
var marker = new google.maps.Marker({
position: customPosition,
map: map,
clickable: false,
icon: 'images/minilogo.png',
animation: google.maps.Animation.DROP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
});
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
// Success!
enableHighAccuracy: true,
$("#map-directions").show();
$("#geo").each(function () {
$(this).animate({
opacity: 0.5
}, 1000);
$(this).unbind();
$(this).html("<a>Position funnen!</a>");
});
console.log("that worked like a charm");
createMap({
polylineOptions:{strokeColor:'red'},
suppressMarkers:true,
coords: true,
lat: position.coords.latitude,
lng: position.coords.longitude
});
}, function errorCallback(error) {
// Gelocation fallback: Defaults to Stockholm, Sweden
console.log("Something went wrong, fallback initalized");
$("#geo").html("<a>Kunde inte hitta din position - pröva igen</a>");
$("#map-directions").hide();
$("#map-directions").unbind();
createMap({
coords: true,
address: customPosition,
zoom: 15
});
}, {
maximumAge: Infinity,
timeout: 10000
});
} else {
// No geolocation fallback: Defaults to Lisbon, Portugal
$('#geo').html('<p>Old browser, cannot run function</p>');
$("#map-directions").hide();
createMap({
coords: true,
address: customPosition
});
} //else
Thanks a lot!

You have to set them for DirectionsRenderer object:
directionsDisplay = new google.maps.DirectionsRenderer(),
Like
directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: polylineOptions
}),
Or call
directionsDisplay.setOptions({
polylineOptions: polylineOptions
});