In the Google Maps API I have set the various location in the Map and set out the Location with their unique address when I try to click on the location the address pop up box should have to be appear on the location place but now in my map when I click anywhere the pop up box shown up in the one place.
Make sure that you open your infoWindow on your marker's onClick listener like this:
var contentString = marker.getPosition().toString();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: location,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
Here's a complete sample implementation using Maps JavaScript API that you can try: https://jsfiddle.net/smga08/anw2hfot/14/
Related
I am having trouble trying to display the event name from an array of objects in a parsed JSON file within Google Maps Ionic framework. Right now I have the markers displaying for each event with a simple string called "testing" which displays fine. The problem is I am unsure of how to display each events name within this info window and not the string I made. Any help would be appreciated. I'll post the sample image I have now as well as the info window functionality below. Thanks!
what I have displaying now:
here
marker/info window functionality:
getMarkers(){
//this.http.get('assets/data/markers.json').map((res)=>res.json()).subscribe(data=>{
this.http.get('http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500').map((res)=>res.json()).subscribe(data=>{
this.addMarkersMap(data);
});
}
addMarkersMap(markers){
for(let marker of markers)
{
var loc = marker.calEvent.locations[0]['coords'];
console.log(loc);
marker = new google.maps.Marker({
position: loc,
map: this.map,
});
var infoWindow = new google.maps.InfoWindow({
content: markers.eventName
});
google.maps.event.addListener(marker, 'click', function(str)
{
return function() {
infoWindow.setContent(str);
infoWindow.open(this.map, marker);
}
}(markers.eventName));
}
}
I correct myself. You could benefit from a closure here.
Use a self-calling function to seal your parameter to the infowindow:
google.maps.event.addListener(marker, 'click', function(str)
{
return function() {
infoWindow.setContent(str);
infoWindow.open(this.map, marker);
}
}(markers.calEvent.eventName));
I have implemented a custom overlay. I want to add an event which will pop an info window when I click the overlay.
function initMap() {
var map = new google.maps.Map(document.getElementById('okmap'), {
zoom: 4,
center: {lat: 35.0000, lng: 103.0000}
});
for (var n in nodes) {
var myMarker = new MyMarker(map, {latlng: new google.maps.LatLng(nodes[n][0], nodes[n][1]),
image: 'assets/img/light-green.png',
labelText: (Math.random() * 100).toFixed(0)});
markers.push(myMarker);
var infowindow = new google.maps.InfoWindow({
content: n
});
myMarker.addListener('click', function() {
infowindow.open(map, myMarker);
});
}
}
But it is not working!
I faced a simliar problem some time back. Here are two things that helped me.
I am considering the main overlay element to be a div.
In your MyMarker.draw function make sure that you are using a pane that has access to the DOM events.e.g.
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(div);
See https://developers.google.com/maps/documentation/javascript/customoverlays#initialize for more details.
Make sure you define an event listener, also in the MyMarker.draw function.
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(self, "click");
});
Within this angular google map, I want to give the ability for a link to appear in a dynamic infowindow thats generated when the user searchs an address.
Now Ive got the infowindow to load correctly but the ng-click event is coming back undefined.
I have compiled the HTML string but still having no joy. Here is the compile code:
google.maps.event.addListener(this.marker, 'click', function () {
var contentString2 = "<div><a ng-click='hello()'>Click me!</a></div>";
var compiled = $compile(contentString2)($q);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
this.selectedMarker = this.marker;
infowindow.open(this.map, this.marker);
});
};
The infowindow loads fine when the marker is selected but when the "ng-click" is clicked inside the infowindow it comes back with:
Uncaught TypeError: undefined is not a function
I've provided a jsbin link to show the code:
http://jsbin.com/zukefa/edit
Thanks in advance for your help.
The initial request url is http://localhost/#/map?lat=33.73060000952102&lng=-117.12635126323244
In my project I'm using Google Maps Autocomplete Service which autopopulates the text field with address predictions and upon select an address the map is centered to that location. My place_changed event listener is fired successfully and my controllers setLocation function is called successfully. However, the URL in the address bar is NOT updated with the new lat and lng param values.
If I call $scope.getProjectsByCenter() from an ng-click in the html it works. Somehow event chain in place_changed conflicts with $location.search.
Anyone have any thoughts as to why?
angular: app.js
var app = angular.module('projectmapsApp', []);
app.controller('MainMapController', function($scope,$location){
$scope.setLocation = function(lat,lng){
$location.search('lat',lat);
$location.search('lng',lng);
console.log($location.search()); //This logs an object with the new lat and lng
};
$scope.getProjectsByCenter = function(){
var center = getProjectsByCenter();
$scope.setLocation(center.lat(),center.lng());
};
});
vanilla: map.js
function initializeMap() {
var map = new google.maps.Map(document.getElementById("map-canvas"), {
center: {lat: 33.868670, lng: -117.796783}
});
var input = document.getElementById('place-search');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
angular.element('#MainMapController').scope().setLocation(lat,lng);
};
};
Found the answer. $apply()
My setLocation now looks like this:
$scope.setLocation = function(lat,lng){
$location.search('lat',lat);
$location.search('lng',lng);
$scope.$apply();
};
Great article here: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
I have a Goole map in a contact page in which i would like to show the infoWindow used on Google map.
Go to that link : Gmap
And click on the marker. A info window should appear.
My question is : How do I make the same thing append on my Website ?
Ps : I know how to build a google.maps.InfoWindow object, but i don't want to create the html myself.
This part of the Google Map's Docs explains this: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
Define your lat long coordinate
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
Set your map otions
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
Initialize your map
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Set the content for your infowWindow
var contentString = '<b>Set content for infowindow here in HTML<b>';
Intialize your infoWindow with the content string.
var infowindow = new google.maps.InfoWindow({
content: contentString
});
Place your marker at the previously defined marker on the above defined map
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
And finally just bind the 'click' event on the marker to the infowindow you created.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});