Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to make a project where I need to integrate google maps api. I need autocomplete, localization and to draw a route on the map. How can I do this with angular, can you recommand me a library for this? Or how can I make this with google maps api for javascript.
This project is generated using yeoman-fullstack.
Thanks.
First of all, if you want to get Google Maps API going with AngularJS you have two solutions:
Using Google Maps APIs from Scratch
Using Angular-Google-Maps
I'm going to show you how to make it easy from scratch.
This is an example of an easy AngularJS application who's intended, only, to learn using such APIs. I've made this little AngularJS exercise in order to use it in bigger applications.
Index.html:
<html ng-app="myApp"> <!--Your App-->
<head>
<title>AngularJS-Google-Maps</title>
<link rel="stylesheet" href="style.css">
<script src="../lib/angular.min.js"></script>
<script src="app.js"></script>
<!-- You have to look for a Maps Key, you can find it on Google Map
Api's website if you pay a bit of attention-->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=
YourKey&sensor=false">
</script>
</head>
<body>
<!--Custom directive my-maps, we will get our map in here-->
<my-maps id="map-canvas"></my-maps>
</body>
</html>
app.js:
var myApp = angular.module("myApp",[]);
//Getting our Maps Element Directive
myApp.directive("myMaps", function(){
return{
restrict:'E', //Element Type
template:'<div></div>', //Defining myApp div
replace:true, //Allowing replacing
link: function(scope, element, attributes){
//Initializing Coordinates
var myLatLng = new google.maps.LatLng(YourLat,YourLong);
var mapOptions = {
center: myLatLng, //Center of our map based on LatLong Coordinates
zoom: 5, //How much we want to initialize our zoom in the map
//Map type, you can check them in APIs documentation
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Attaching our features & options to the map
var map = new google.maps.Map(document.getElementById(attributes.id),
mapOptions);
//Putting a marker on the center
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:"My town"
});
marker.setMap(map); //Setting the marker up
}
};
});
style.css:
//Just giving our container Height and Width + A Red border
#map-canvas{
height: 400px;
width: 700px;
border: 2px solid red;
}
That's just a really basic way to get it started, I didn't even use a controller, even if you really should use them in AngularJS.
This is a working Plunk I put up with this code.
You can play with Google Maps API's in many different ways, just look at the documentation or here on StackOverflow.
Now, if you want to manage routes between 2 locations, markers, etc, you should look at:
Google Maps APIs Documentation
This answer by #geocodezip
This answer by #Gurpreet Singh
This answer by #zeeshan0026
And, at the end, you can check this working JSFiddle made by #Shreerang Patwardhan using Polylines (Your long wanted routes).
For future implementations, ensure to put your myMaps.js directive in a separated file and Inject it has a Dependency in your App Module In order to get DRY (Don't Repeat Yourself) and Maintainable applications using the same working directive as starter point for your Angular application involving Google Maps. For instance, you'll be able to just change your coordinates or adding some new map's option to kickstart future applications that require Google Maps.
You should get something like:
myApp.directive("myMap", function(){ . . . }); //Goes in a Separated File
var myApp = angular.module("myApp",['myMaps']); //Dependency Injection
I hope I've been helpful.
You can use Angular google maps. Angular Google Maps is a set of directives (part of angular-ui) written in CoffeeScript and Javascript which integrate Google Maps in an AngularJS applications. Of course there are many other directives for this purpose.
https://angular-ui.github.io/angular-google-maps/
Related
2 files map plugin -github
I'm above to give up please help... noob here.
Created custom style google map with generated code from googles style map wizard site thing
Followed the instructions and various tutorials, jsfiddles, and all sorts and am just so confused.
I put the code into GitHub so you can see what I'm working with. On my site the scripts.js is inside the folder, (first time on GitHub/new to JS and PHP and can't figure how to move the js file into a folder on GitHub lol)
Have confirmed that All the scripts are loading in the head - YAY
The is loading on my page
The CSS is loading #put-map {height:300px; width:300px;}
But the actual map isn't
API is working from local host (tested static html page with apu and custom style map)
No error in browser just doesn't display the actual map.
Is it the event listener - addDomListener - perhaps something there isnt right - I have no idea.
I am trying to create simple ultra lite base map plugin, that I can just replace style or location code for when I want to use maps, I am relying too much on Elementor sites getting really clunky, so trying to expand my knowledge to be less dependent on visual page builders... REALLY appreciate any offers to help with this,
This is my first js project, I'm guessing I've just missed something small, or am COMPLETELY OFF… Anyway I've only included the JS here, as I'm 95% sure the php is fine, but the link to the whole thing is above
Cheers Ness
jQuery.noConflict();
// JS for Google Map with Custom Style obtained https://mapstyle.withgoogle.com/
// Function to create the map
function initMap() {
// create variable themap and define the element id for use in html ie to be used like: <div id="put-map"></div>
var themap = document.getElementById( 'put-map' );
// create variable mapOptions and define options and information for the map to display
var mapOptions = {
// Generated long and lat from https://www.latlong.net/
center: {
lat: -37.345,
lng: 144.146
},
zoom: 12,
// Disable all the controls https://developers.google.com/maps/documentation/javascript/controls
// in this case i don't want the use to have any options to change the map position or zon in etc.
disableDefaultUI: true,
//******************************************************************************
//
// Custom map visual styling
// Styles applied from wizard https://mapstyle.withgoogle.com/
// - Cut and paste JSON Code from below //**** to above next //****
//******************************************************************************
styles: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
more style code is here but cut it to keep it shorter i cut and past from JSON off google between the stars
]
//******************************************************************************
//end of Style part
}; //end of Map Options
// create a new map using the information and options defined in the variables themap and mapOptions
var map = new google.maps.Map( themap, mapOptions );
} //ends function initMap
// Create a DOM event to tell the site to load the createmap function when it finds <div id="mymap"></div> on the web page
google.maps.event.addDomListener( window, 'load', initMap );
Thanks again.
OHHHH SOOO EXCITED I was way overcomplicating it... and I think I had most of the right bits but in the wrong places, I was pretty close. I also think that I might have been updating the script.js file outside my activated plugin so the changes were not actually reflecting on the page - Rookie error eh, either way I've cleaned it all up and its working.
Eventually I found this awesome video hidden amongst all the how to use Google Maps with HTML embed/iframes or how to get an API :( but this video actually shows you step by step Google Maps JavaScript API Tutorial by Traversay Media enough to get the right idea... I only needed the first few minutes as the video goes on to tutorial how to add markers and other fancy features, that i didnt need.
I have a GitHub repository (new to Git too) and in the code I have over commented to explain what (I think) is happening in the PHP/JS, what resources I used to generate bits of code from googles map wizards, where certain variables and names need to be the same and also where you need to make changes. There are no instructions on getting your JavaScript Map API there are plenty of these around.
The plug in consists of 3 very short files, so I'm sure there are different ways of presenting some parts of the code, or some ways of doing it more efficiently, please remember I'm still learning this is my first plugin, first finished bit of real PHP, and very first use of JavaScript
Really happy that I resolved from resources I found myself, was really exciting. I hope this helps others.
GitHub - Googlemap-wp by Vanessa
Hi all I am creating an Angular 6 project and I am looking to implement asset tracking utilizing google maps api. However, I was wondering if AGM-Map supports everything Google Maps Api does such as heatmaps, and asset tracking because I can only seem to find basic placing markers and circles on a map.
I will say the majority of the functionality of the Google Maps is in AGM, if not you can get your questions answered in the official forum. Also, there are a lot of dependencies that people created to fill this functionalities that were missing.
Here's a small demo, showing how to use the map and showing how to use a marker from the map. This map will add a new marker wherever you click on the map and if you click on a marker it will erase it.
https://stackblitz.com/edit/angular-google-maps-demo-d9iec2
HTML
<agm-map
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
[disableDefaultUI]="false"
[zoomControl]="false"
(mapClick)="mapClicked($event)">
<agm-marker
*ngFor="let m of markers; let i = index"
(markerClick)="eraseMarker(m)"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label">
</agm-marker>
</agm-map>
TS
eraseMarker( marker: Marker) {
const positionArray = this.markers.indexOf(marker);
this.markers.splice(positionArray, 1);
console.log(this.markers);
}
Also reference this for the heat map:
https://www.npmjs.com/package/agm-overlays
https://github.com/SebastianM/angular-google-maps/issues/1423
https://www.npmjs.com/package/agm-heatmap
I have the following in my html page:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false">
</script>
<script
async defer
src="https://maps.googleapis.com/maps/api/js?key=hUnDAdjYG_Wz7u2qL6unHqfBOmvaZ0H1Mg&callback=initMap">
</script>
First link is for Google's API Geometry Library , and the second initialises and draws the map.
I'm getting the error "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."
I know that this can be fixed by calling just one script, and changing the parameters, see Fixing "You have included the Google Maps API multiple times on this page. This may cause unexpected errors." I don't know how to replicate the answer for my problem though.
You can include one link:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false&key=AIzaSyBSsKUzYG_Wz7u2qL6unHqfBOmvaZ0H1Mg&callback=initMap">
</script>
Basically merging the url parameters in both the links.
Had the same problem that disturbed me for long time. My case was to combine initMap to load map and Google Places API to list autocomplete to the input search.
Here is my solution to this.
The function for autocomplete I've put inside the initMap()
function activatePlacesSearch() {
var input = document.getElementById('inputValue');
var autocomplete = new google.maps.places.Autocomplete(input);
}
activatePlacesSearch();
in index.html:
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMap"></script>
So best solution is to:
a) combine two scripts into one
b) place sensro functionality insite the initMap if possible.
I have a Map with custom style and its working great,
I was wondering if I can somehow control the location of the map using some links in my page,
suppose I have 2 locations, I want to have
Location1
&
Location2
Then when I click on Location 1 map goes to that location , and same story for location 2, is it possible with jquery?
It would also be great if I can add a custom marker to each location too.
Thanks.
Yes, you can even do it without jquery, the panto method is what you want to use, https://developers.google.com/maps/documentation/javascript/reference#Map basically, just add a call to a predefined function into your anchor onclick event (or use a click handler in jquery to wire it up).
using jquery, you would need something like:
$("#location1").click(function(){
var pos = new google.maps.LatLng(-25.363882, 131.044922),
g_map.panTo(pos); //reference to globally defined google maps object
});
Here is a simple example from the google api documentation that can easily be retrofitted using the hints I have provided above:
https://google-developers.appspot.com/maps/documentation/javascript/examples/event-simple
if your instance of map is named "map", you can use:
Location1
I'm using the Google Maps v3 library, with the Multi-Marker library which extends the functionality of Google Maps for super fast adding of map marker icons to a map.
I can't figure out how to remove a single, individual map marker using the multi-marker library linked above.
Does anyone have any ideas how I'd do this using the multi-marker library (and/or Google Maps)? I've tried contacting the lead developer of the project but am not getting a response.
Thanks for any help.
Also, linked is more information on this library
http://blog.redfin.com/devblog/2010/07/introducing_multimarker_the_fastest_way_to_add_many_hundreds_or_thousands_of_markers_on_google_maps.html
UPDATE:
I have linked example code of what I'm doing. I want to dynamically remove specific map marker icons (overlays) but am struggling on how to do that. Any advise would be very appreciated. Thanks
Live example:
http://multimarker.googlecode.com/svn/trunk/fast-marker-overlay/maps-v3/example/clickable.html
Normaly, using only the google maps api, to remove an overlay from the map you would need to call the setMap(null) method on the overlay.
As I can see, the Multi-Marker library uses an array to hold all the markers and creates an overlay to show on the map, an overlay that contains the markers. To remove one, it should work to remove the marker from the array (you need to know its position in the array) and redraw the overlay.
Edit:
You need something similar to function clearOverlays() { var i = overlays.length; while (i--) { var overlay = overlays[i]; if (overlay) overlay.setMap(null); delete overlays[i]; } }
But you'll need to know the position in the array of the marker you want to delete. The function will look like this:
function clearOneOverlay(var position) { var overlay = overlays[position]; if (overlay) overlay.setMap(null); delete overlays[position]; }
try this: remember which marker you click and then remove it later
consider following code(Google Maps v2)
var current_marker;
GEvent.addListener(marker, "click", function() {
current_marker = marker;
});
//remove later
current_marker.setMap(null);