Here is my code
panoramaOptions = {
enableCloseButton : true,
visible : false
};
myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
var mapOptions = {
center: currentCenter,
zoom: defaultZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
overviewMapControl: true,
streetViewControl: false,
streetView : myPano
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.setStreetView(myPano);
google.maps.event.addListener(map,"click", function(e) {
map.setCenter(e.latLng);
myPano.setPosition(e.latLng);
if (marker != null) {
marker.setMap(null);
}
marker = new google.maps.Marker({
icon: new google.maps.MarkerImage("http:///maps.gstatic.com/mapfiles/cb/man_arrow-0.png"),
map: map,
draggable: true,
position: e.latLng
});
marker.setMap(map);
myPano.setVisible(true);
});
Now the problem is that sometimes the streetview doesn't come. How to solve this?
Related
in this code I'am trying to make something like Uber map section to pin and stop markers. but i am dragging maker instead of map under marker.
It is not looking good user experiences.
I want to add target marker after setting Location and tapping on Originmaker
and then binding them in a view.
initializeMap() {
let image = 'assets/img/taxi3.png';
let minZoomLevel = 16;
Geolocation.getCurrentPosition().then((position) => {
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(this.map);
this.OriginMarker();
});
}
OriginMarker(){
let image = 'assets/img/Untitled-1.png';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter(),
draggable: true,
icon: image
});
}
TargetMarker() {
let image = 'assets/img/Untitled-2.png';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter(),
draggable: true,
icon: image
});
}
in this code map and marker are working well, but marker position is not integrated with real time Geolocation and after marker appears if device replace hundred of meters it is not show moving.
initializeMap() {
var minZoomLevel=16
Geolocation.getCurrentPosition().then((position) => {
this.map = new google.maps.Map(document.getElementById('map_canvas'),
{
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(this.map);
this.Marker();
});
}
Marker(){
let image = 'assets/img/Untitled-1.png';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter(),
// draggable: true,
icon: image
});
I'm currently developing an Angular2 project which using Google Maps.
I'm trying to display the markers and multiple markers around the area.
I've got the map working but can't seem to marker.
<div class="google-maps"></div>
constructor(private _elementRef:ElementRef) {
}
ngAfterViewInit() {
let el = this._elementRef.nativeElement.querySelector('.google-maps');
GoogleMapsLoader.load((google) => {
let myLatlng = new google.maps.LatLng(44.5403,-78.5463);
new google.maps.Map(el, {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
new google.maps.Marker(el,{
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatlng,
title:"Hello World!"
});
});
}
Try this code this work my project
Google Official Doc here
import GoogleMapsLoader from 'google-maps';
import { google } from 'google-maps';
ngAfterViewInit() {
let el = this._elementRef.nativeElement.querySelector('.contact-us');
GoogleMapsLoader.KEY = 'g4554645645645645645646';
GoogleMapsLoader.load((google) => {
let myLatlng = new google.maps.LatLng(23.5454, 90.8785);
let map = new google.maps.Map(el, {
center: new google.maps.LatLng(23.8787878, 90.87878),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
let marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatlng,
map: map,
title:"Hello World!"
});
});
Template.html
<div class="contact-us" style="position: relative; height: 470px;"></div>
The marker function doesnt seem to match the official docs here.
let map = new google.maps.Map(el, {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
let marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatlng,
map: map,//set map created here
title:"Hello World!"
});
We are currently using two google maps on one page, the first one is an aerial view, and this I can turn off draggable and it works fine. The other is an internal view of the building, when I use the same code on this, it doesnt disable draggable on mobile or on desktop, I can disable scrollwheel movement, but not draggable. The code I am using is below.
function initialize2() {
var fenway = new google.maps.LatLng(0, 0);
var mapOptions = {
center: fenway,
scrollwheel: false,
zoom: 8,
draggable: false
};
var panoramaOptions = {
position: fenway,
scrollwheel: false,
draggable: false,
<?php echo(isMobile()) ? 'draggable: false,' : ''; ?>
pov: {
heading: 180,
pitch: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas2'),panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
You just need to add: draggable: false like this
// Function to initialize the map within the map div
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 27.963989, lng: -82.799957},
zoom: 14,
draggable: false
});
}
I have an array of custom Icons as:
var iconBase = 'http://localhost/icons/';
var icons = {
red: {
icon: iconBase + 'red.png'
},
green: {
icon: iconBase + 'green.png'
},
info: {
icon: iconBase + 'red.png'
}
};
Now when I call them in Marker like this icon: icons[red].icon, at:
var marker = new google.maps.Marker({
position: latlng,
icon: icons[red].icon,
map: map
});
I am not getting any marker on the map can you please let me know what I am doing wrong? Here is the whole Code:
var map;
$(document).ready(function () {
var latlng = new google.maps.LatLng(49.241943, -122.889318);
var myOptions = {
zoom: 17,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
panControl: true,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
},
zoomControl: true
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//Icon Contoling
var iconBase = 'http://localhost/icons/';
var icons = {
red: {
icon: iconBase + 'red.png'
},
green: {
icon: iconBase + 'green.png'
},
info: {
icon: iconBase + 'red.png'
}
};
var marker = new google.maps.Marker({
position: latlng,
icon: icons[red].icon,
map: map
});
});
ReferenceError: red is not defined
Try changing
icon: icons[red].icon
to
icon: icons['red'].icon