Hi guys this is my first post in this site, im working in a App in Ionic that shows your position with a marker when you push a button, you can push it again to update your position and add a Marker on that position, i want to draw a Polyline between this markers but i havent succeed yet. i know there are some ways to draw polylines my idea is to extract the lat, long coordinates of the marker, save them in a array and then set that as a "path" to draw the Polyline but im having problems with the creation of the array like in the comment below. here is my code:
import { Component, ViewChild, ElementRef } from '#angular/core';
import { NavController} from 'ionic-angular';
import { Geolocation } from '#ionic-native/geolocation';
declare var google;
#Component({
selector: 'home-page',
templateUrl: 'home.html'
})
export class HomePage {
#ViewChild('map') mapElement: ElementRef;
map: any;
me: any;
markers=[];
lat=[];
long=[];
constructor(public navCtrl: NavController, public geolocation: Geolocation) {
}
ionViewDidLoad(){
this.loadMap();
}
loadMap() {
this.geolocation.getCurrentPosition().then((position) => {
let mylatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: mylatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
},
(err) => {
console.log(err);
});
}
addMarker(){
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
});
let content = '<p>Posición: ' + marker.setPosition() + '</p>'
if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
marker.setPosition(me);
},
function(error) {
// ...
});
this.markers.push(marker);
this.addInfoWindow(marker, content);
}
addInfoWindow(marker, content){
let infoWindow = new google.maps.InfoWindow({
content: content
});
if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
infoWindow.setContent('<p>Posición: ' + me + '</p>')
},
function(error) {
// ...
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
}
setMapAll(map) {
for (var i = 0; i < this.markers.length; i++) {
this.markers[i].setMap(map);
}
}
clearMarkers() {
this.setMapAll(null);
}
deleteMarkers() {
this.clearMarkers();
this.markers = [];
}
// Im having problems here
addPolyLine() {
var poly = new Array();
for (var j=0; j<this.lat.length;j++){
var pos= new google.maps.LatLng(this.lat[j],this.long[j])
poly.push(pos);
}
var flightPath = new google.maps.Polyline({
path: poly,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(this.map);
}
}
And the HTML page:
<ion-header>
<ion-navbar>
<ion-title>
MapaPrueba
</ion-title>
<ion-buttons end>
<button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Agregar Pos</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<div #map id="map"></div>
<ion-fab left bottom>
<button ion-fab color="light" (click)="clearMarkers()">
<ion-icon name="eye-off"></ion-icon>
</button>
</ion-fab>
</ion-content>
There is a full example of that in the official documentation and here below as well.
In short you have to:
Create a Polyline and set it on the map (one time)
Get the Polyline path with the Polyline getPath() method
Push your new
coordinates to the path
var map;
var polyLine;
var polyOptions;
function initialize() {
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(0,0)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
polyOptions = {
strokeColor: '#0026b3',
strokeOpacity: 1.0,
strokeWeight: 1,
geodesic: true,
}
polyLine = new google.maps.Polyline(polyOptions);
polyLine.setMap(map);
google.maps.event.addListener(map, 'click', function(event) {
addPoint(event);
});
}
function addPoint(event) {
var path = polyLine.getPath();
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
});
map.setCenter(event.latLng);
}
initialize();
#map-canvas {
height: 200px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
Related
I am trying to add marker to the google maps.
but I am facing below error.
InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
can you tell me how to fix it.
providing code and stackblitz below.
https://stackblitz.com/edit/angular-gmaps-api-suvdaf?file=src/app/map-loader.ts
return MapLoader.load().then((gapi) => {
this.map = new google.maps.Map(gmapElement.nativeElement, {
center: new google.maps.LatLng(lat, lng),
zoom: zoom,
mapTypeId: type,
// label: "A"
});
this.map1 = new google.maps.Marker({
label: "A",
position: { lat: 59.33555, lng: 18.029851 },
map: map,
title: 'Hello World!'
});
// let markerSimple = new google.maps.Marker({
// label: "A",
// position: { lat: 59.33555, lng: 18.029851 },
// map: map,
// title: 'Hello World!'
// });
});
If i have understand your question this modified code will add markers
import { Injectable } from '#angular/core';
import { } from '#types/googlemaps';
declare var window: any;
// Credits to: Günter Zöchbauer
// StackOverflow Post: https://stackoverflow.com/a/39331160/9687729
#Injectable()
export class MapLoader {
private static promise;
map: google.maps.Map;
public static load() {
if (!MapLoader.promise) { // load once
MapLoader.promise = new Promise((resolve) => {
window['__onGapiLoaded'] = (ev) => {
console.log('gapi loaded')
resolve(window.gapi);
}
console.log('loading..')
const node = document.createElement('script');
node.src = 'https://maps.googleapis.com/maps/api/js?callback=__onGapiLoaded';
node.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(node);
});
}
return MapLoader.promise;
}
initMap(gmapElement, lat, lng, zoom, type) {
return MapLoader.load().then((gapi) => {
this.map = new google.maps.Map(gmapElement.nativeElement, {
center: new google.maps.LatLng(lat, lng),
zoom: zoom,
mapTypeId: type,
// label: "A"
});
//after map load add markers
this.createMarker();
});
}
createMarker() {
// list of hardcoded positions markers
var myLatLngList = {
myLatLng : [{ lat: 37.76487, lng: -122.41948 }, { lat: 59.33555, lng: 18.029851 }]
};
//iterate latLng and add markers
for(const data of myLatLngList.myLatLng){
var marker = new google.maps.Marker({
position: data,
map: this.map,
title: 'markers'
});
}
};
}
once again I have met my nemesis, adding google markers and setting content within and info-window. In this code, I have already completed a geolocation, and from my current location I, would like to perform a search on nearby places. The places I search will be retrieved from an Ionic list page I have already implemented. From what ever I choose on the list ex. Fire Stations, I would want my code to perform a Places Search, and the results turn up on my map as markers, with infowindow content from google libraries. My problem is that the markers are not on my map, and you can probably guess, that means no info window. If you could provide me with some direction. I am preforming this in Ionic.
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { DirectionPage} from '../direction/direction';
/**
* Generated class for the PlacesPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
declare var google;
this.marker = [];
#Component({
selector: 'page-places',
templateUrl: 'places.html',
})
export class PlacesPage {
places: Array<any>;
map: any;
currentLocation: any;
latitude: Number;
longitude: Number;
keyword: String;
searchType: String;
distance: Number;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.latitude = navParams.get('latitude');
this.longitude = navParams.get('longitude');
this.keyword = navParams.get('keyword');
this.searchType = navParams.get('type');
this.distance = navParams.get('distance');
}
ionViewDidLoad() {
this.queryPlaces().then((results : Array<any>)=>{
for (let i=0; i < results.length; i++){
this.createMarker(results[i]);
}
this.places = results;
}, (status)=>console.log(status));
}
queryPlaces(){
this.currentLocation = new google.maps.LatLng(this.latitude,this.longitude);
let mapOptions = {
zoom: 10,
center: this.currentLocation,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
let service = new google.maps.places.PlacesService("service");
let request = {
location : this.currentLocation,
radius: this.distance,
types: [this.searchType],
rankBy: google.maps.places.DISTANCE
};
return new Promise((resolve,reject)=>{
service.nearbySearch(request, function(results,status){
if (status == google.maps.places.PlacesServiceStatus.OK){
resolve(results);
}else{
reject(results);
}
});
});
}
createMarker(place){
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: place.geometry.location,
title: place.name,
});
google.maps.event.addListener(marker, 'click', function(){
let infowindow = new google.maps.infowindow({
content : this.place
});
infowindow.open(this.map,marker);
});
}
goToDirectionPage(index){
}
}
I realized the "I" in infowindow needed to be capitalized. Also, place.geometry.location gets the position for the marker object.
createMarker(place){
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: place.geometry.location,
title: place.name,
});
google.maps.event.addListener(marker, 'click', function(){
let infowindow = new google.maps.InfoWindow({
content: place.name
});
infowindow.open(this.map,marker);
})
I'm using angularJS 2 and I'm trying to add google maps autocomplete following this guide.
I've also installed angular-maps from https://angular-maps.com and been able to display a simple basic google map.
In my index.html file I've inserted:
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxx&libraries=places&callback=initAutocomplete">
My app.ts looks like this:
import {Component, provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
MapsAPILoader,
NoOpMapsAPILoader,
MouseEvent,
ANGULAR2_GOOGLE_MAPS_PROVIDERS,
} from 'angular2-google-maps/core';
#Component({
selector: 'my-app',
directives: [ANGULAR2_GOOGLE_MAPS_DIRECTIVES],
template: `
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
`
})
export class AppComponent
{
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function()
{
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place)
{
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
But I get this error:
angular2-polyfills.js:332 Error: ReferenceError: google is not
defined(…)ZoneDelegate.invoke
#angular2-polyfills.js:332Zone.run
#angular2-polyfills.js:227(anonymous function)
#angular2-polyfills.js:576ZoneDelegate.invokeTask
#angular2-polyfills.js:365Zone.runTask
#angular2-polyfills.js:263drainMicroTaskQueue
#angular2-polyfills.js:482ZoneTask.invoke
#angular2-polyfills.js:434
You need to make sure that you have installed the TypeScript declaration files for Google maps. I found the "googlemaps" DefinitelyTyped library to work:
$ npm install #types/googlemaps --save-dev
got my current location with nearby places eg.(grocery_or_supermarket) and their icons.
but what i want to do is give each of the shops their own logo as an icon.
I'm new to JS so any help plz!
I have code to share if needed.
<script>
var infowindow,
placemarkers = [];
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
},
grocery_or_supermarket: {
icon: iconBase + 'convenience.png'
}
};
function placeSearch(map, request) {
var map = map;
var service = new google.maps.places.PlacesService(map);
service.search(request,
function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < results.length; ++i) {
bounds.extend(results[i].geometry.location);
placemarkers.push(createMarker(results[i].geometry.location,
map,
icons['grocery_or_supermarket'].icon,
results[i].name,
false, {
fnc: function () {
infowindow.open();
}
}));
}
map.fitBounds(bounds);
}
});
}
function createMarker(latlng, map, icon, content, center, action) {
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: latlng,
content: content
});
////////toggle bounce////
google.maps.event.addListener(marker, 'click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE); } } ///////bounce end////
if (icon) {
marker.setIcon(icon);
}
if (center) {
map.setCenter(latlng);
}
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
if (action) {
action.fnc(map, action.args);
}
return marker;
}
function initialize() {
var location = new google.maps.LatLng(-33.8665433, 151.1956316),
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: location,
zoom: 15,
});
infowindow = new google.maps.InfoWindow();
navigator.geolocation.getCurrentPosition(function (place) {
createMarker(
new google.maps.LatLng(place.coords.latitude,
place.coords.longitude),
map,
null,
'your current position',
true, {
fnc: placeSearch,
args: {
radius: 5000,
types: ['grocery_or_supermarket'],
location: new google.maps.LatLng(place.coords.latitude,
place.coords.longitude)
}
});
});
}
</script>
You can easily do with not so much code:
var iconBase = 'http://www.yourwebsite.com/';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconBase + 'myMarker.png' // Set yourt marker here
});
Here's is more about google maps and icons.
https://developers.google.com/maps/tutorials/customizing/custom-markers
Almost the same question, maybe can help you:
How to change icon on Google map marker
I got to get my location and nearby places I want in google maps.
I just cant seem to figure out how to add custom icons (markers) to the nearby places.
I'm new to JS so any help plz!
1. /////MY CODE/////
<!DOCTYPE html> <html> <head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<!--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCAVlwiMJEZaezI2EJvmL5peK4wS3gkFGo&sensor=true"></script>-->
<script>
var infowindow,
placemarkers = [];
function placeSearch(map, request) {
var map = map;
var service = new google.maps.places.PlacesService(map);
service.search(request,
function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < results.length; ++i) {
bounds.extend(results[i].geometry.location);
placemarkers.push(createMarker(results[i].geometry.location,
map,
!!!!this is the places icons. i want to change these icons to custom
icons!!!!!'http://labs.google.com/ridefinder/images/mm_20_orange.png',
results[i].name,
false, {
fnc: function () {
infowindow.open();
}
}));
}
map.fitBounds(bounds);
}
});
}
function createMarker(latlng, map, icon, content, center, action) {
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: latlng,
content: content,
});
////////toggle bounce////
google.maps.event.addListener(marker, 'click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE); } } ///////bounce end////
if (icon) {
marker.setIcon(icon);
}
if (center) {
map.setCenter(latlng);
}
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
if (action) {
action.fnc(map, action.args);
}
return marker;
}
function initialize() {
var location = new google.maps.LatLng(-33.8665433, 151.1956316),
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: location,
zoom: 15,
});
infowindow = new google.maps.InfoWindow();
navigator.geolocation.getCurrentPosition(function (place) {
createMarker(
new google.maps.LatLng(place.coords.latitude,
place.coords.longitude),
map,
null,
'your current position',
true, {
fnc: placeSearch,
args: {
radius: 5000,
types: ['grocery_or_supermarket'],
location: new google.maps.LatLng(place.coords.latitude,
place.coords.longitude)
}
});
});
}
</script> </head> <body onload="initialize()">
<div id="map"> </div> </body> </html>
<script>
var infowindow,
placemarkers = [];
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
},
grocery_or_supermarket: {
icon: iconBase + 'convenience.png'
}
};
function placeSearch(map, request) {
var map = map;
var service = new google.maps.places.PlacesService(map);
service.search(request,
function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < results.length; ++i) {
bounds.extend(results[i].geometry.location);
placemarkers.push(createMarker(results[i].geometry.location,
map,
icons['grocery_or_supermarket'].icon,
results[i].name,
false, {
fnc: function () {
infowindow.open();
}
}));
}
map.fitBounds(bounds);
}
});
}
function createMarker(latlng, map, icon, content, center, action) {
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: latlng,
content: content
});
////////toggle bounce////
google.maps.event.addListener(marker, 'click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE); } } ///////bounce end////
if (icon) {
marker.setIcon(icon);
}
if (center) {
map.setCenter(latlng);
}
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
if (action) {
action.fnc(map, action.args);
}
return marker;
}
function initialize() {
var location = new google.maps.LatLng(-33.8665433, 151.1956316),
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: location,
zoom: 15,
});
infowindow = new google.maps.InfoWindow();
navigator.geolocation.getCurrentPosition(function (place) {
createMarker(
new google.maps.LatLng(place.coords.latitude,
place.coords.longitude),
map,
null,
'your current position',
true, {
fnc: placeSearch,
args: {
radius: 5000,
types: ['grocery_or_supermarket'],
location: new google.maps.LatLng(place.coords.latitude,
place.coords.longitude)
}
});
});
}