Google Maps GMT timezone offset - maps

I have been going through the docs, but I can't find what I'm looking for.
I need to find the timezone offset of a clicked point on the map (e.g. GMT +2:00). All I need is the +2 part. Here's what I have so far:
google.maps.event.addListener(map, 'click', function(event) {
marker = new google.maps.Marker({position: event.latLng, map: map});
alert(event.latLng);
alert(event.time_zone);
var contentString = 'test';
var infowindow = new google.maps.InfoWindow({content: contentString});
infowindow.open(map,marker);
});

Related

Data Pop Up in same area of Google Maps api

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/

Display parsed data in info window in Google Maps

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

angularjs google maps $location.search does not change after autocomplete place_change

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

How to open the infoWindow google map is using?

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

Backbone.js fetch issues with Google Maps

With backbone I am fetching results from Google maps to return markers of places where the user is. The results populate a collection which I clear everytime the user moves the map as a new fetch occurs based on the new location bounds (I am using the google map idle event to get this information and changing the URL of the collection).
To manage the markers I populate an array with each marker.
The issue I am having is I get the first set of markers but it does not write in any new markers when the map is moved and when you inspect the markers array its the same results as last. If I do an AJAX call I get the desired results, but I want to keep this all within a backbone collection as I do other processes with the model.
/* Tracking Page Items */
var allPlace = Backbone.Model.extend({
createMarker:function(){
var marker = new google.maps.Marker({
position: this.getLatLng(),
title: this.get("name"),
location_type: this.get("type")
});
return marker;
}
});
var MarkersCollection = Backbone.Collection.extend({
model: allPlace,
url:function(){
return '/'
}
})
var markersArray = [];
var mapAll = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'render', 'createMarkers'); // get access to this in other methods
this.collection.bind('reset', this.render, this);
},
render: function() {
// Load map scripts and initialise
if(typeof google === "undefined"){
nzp.loadGoogleMap();
} else {
nzp.initializeMap();
};
// Current location
myLocations = {
lat: this.collection.lat,
lng: this.collection.lng
};
// Listen for map movement
var self = this;
google.maps.event.addListener(map, 'idle', function() {
var bounds = map.getBounds();
var lat1 = bounds.ca.b;
var lng1 = bounds.ea.b;
var lat2 = bounds.ca.f;
var lng2 = bounds.ea.f;
self.showMarkers(lat1, lng1, lat2, lng2);
});
},
// update URL based on new bround
showMarkers: function(lat1, lng1, lat2, lng2) {
var markerCollection = new MarkersCollection;
nzp.infoWindow = new google.maps.InfoWindow();
lat = myLatlng.Xa;
lng = myLatlng.Ya;
lat1 = lat1;
lng1 = lng1;
lat2 = lat2;
lng2 = lng2;
// Collection URL build from parameter adn current location
markerCollection.url = "http://blah.com/locator/api/locations?api_key=XXX&nearby_latitude="+lat+"&nearby_longitude="+lng+"&lat1="+lat1+"&lng1="+lng1+"&lat2="+lat2+"&lng2="+lng2+"&max=10&format=jsonp&callback=?";
// Fetch collection
markerCollection.fetch({
success: function(results) {
// Clear the markers array
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
// Loop over items in collection
results.map(function(item){
var marker = item.createMarker();
marker.setMap(map);
// Create a marker based on each item
(function(marker, item) {
google.maps.event.addListener(marker, "click", function(e) {
nzp.infoWindow.setContent(infowindowContent(item)); // Info window content is processed in a method within the model
nzp.infoWindow.open(map, marker);
});
// Place each marker in the markers arrya
markersArray.push(marker); // Push markers into an array so they can be removed
})(marker, item);
}, this);
}
});
// Set markers to vidsible
$.each(markersArray, function(index, item){
markersArray[index].setVisible(true);
});
});
Fixed this. The issue was related to the values being passed to the API and not how I was updating the collection URL as I thought.
I was passing a bounds and a current location and bounds which was causing the API to always return the same results. The working AJAX version I had of the code had a typo in the URL which actually allowed the API to return the correct results.

Resources