I'm having an issue with the Googlemaps API, specifically the places library. This is all using WordPress.
I've built a sign up form here: http://dabble.market/cms/sign-up/
I replicated exactly what I built in my localhost. I have the bottom field labelled: "Address which will be shown on the our map. Start typing & choose from the list." hooked up to the Googlemaps API using the places library. It then ran Google's address lookup / autocomplete on it perfectly fine. Once the Address autocomplete ran, it served the full address and lat / lng coords back to the user using the JS written below.
Now that I've migrated it over to a live version of the site, the address lookup functionality no longer works.
Any help would be really appreciated thanks.
var address, latitude, longitude, addressString;
function initialize() {
google.maps.event.addDomListener(window, 'load', function () {
var options = {
componentRestrictions: {country: "nz"}
};
var input = document.getElementById('txtPlaces');
var places = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
if (!place.geometry) {
jQuery('#error').css("display", "inherit");
return;
}
else{
jQuery('#error').css("display", "none");
}
address = place.formatted_address;
latitude = place.geometry.location.lat();
longitude = place.geometry.location.lng();
addressString = "Address: " + address + "\n" + "Latitude: " + latitude + "\n" + "Longitude: " + longitude;
jQuery('#geocoords-hidden').val(addressString);
jQuery('#addressContainer').css("display", "inherit");
jQuery('#addressInfo').text("Address: " + address);
jQuery('#addressInfo1').text("Latitude: " + latitude);
jQuery('#addressInfo2').text("Longitude: " + longitude);
});
});
}
OK - I've figured it out.
I removed the function initialize() { ... }
and replaced it with:
jQuery(document).ready(function($){ ... });
Related
Google changed his GCM (Google Cloud Messaging) to FCM (Firebase Cloud Messaging). What should I do to integrate it with Appcelerator app?
I found a lot of modules in marketplace but I think they only work with GCM.
Has anyone tried to combine it?
I have this currently working with FCM and a module called Ti.Goosh. It works really well and I can send push notifications to web browsers and Android devices with it. https://github.com/caffeinalab/ti.goosh
create an html with some Firebase functions, in my case we need to find some vehicles on a Geo radio
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firebase</title>
<!-- Firebase -->
<script src="firebase.js"></script>
<!-- GeoFire -->
<script src="geofire.min.js"></script>
</head>
<body style="margin:0;padding:0;border:0;">
<script type="text/javascript">
var markers = new Array();
var markersArray = [];
var driverInvitations;
var diverInvited;
Ti.App.addEventListener('firebase:init', function(e) {
Ti.API.info('Geofire init');
Ti.API.info(e);
Ti.API.info('latitude :'+e.latitude);
Ti.API.info('longitude :'+e.longitude);
var latitude = parseFloat(e.latitude);
var longitude = parseFloat(e.longitude);
// Set the center
var center = [latitude, longitude];
// Query radius
var radiusInKm = 0;
// Get a reference to the Firebase public transit open data set
var transitFirebaseRef = new Firebase("https://xxx.firebaseio.com/");
// Create a new GeoFire instance, pulling data from the public transit data
var geoFire = new GeoFire(transitFirebaseRef.child("_geofire"));
/*************/
/* GEOQUERY */
/*************/
// Keep track of all of the vehicles currently within the query
var vehiclesInQuery = {};
// Create a new GeoQuery instance
var geoQuery = geoFire.query({
center : center,
radius : radiusInKm
});
geoQuery.on("ready", function() {
Ti.API.info("GeoQuery has loaded and fired all other events for initial data");
Ti.App.fireEvent('fbController:selectDriver');
});
/* Adds new vehicle markers to the map when they enter the query */
geoQuery.on("key_entered", function(vehicleId, vehicleLocation) {
Ti.API.info('Geofire enter driver, id ' + vehicleId + ', on location ' + vehicleLocation);
var latitude = vehicleLocation[0];
var longitude = vehicleLocation[1];
Ti.App.fireEvent('fbController:addMarker', {
id : vehicleId,
latitude : latitude,
longitude : longitude
});
});
/* Moves vehicles markers on the map when their location within the query changes */
geoQuery.on("key_moved", function(vehicleId, vehicleLocation) {
Ti.API.info('Geofire move driver, id ' + vehicleId + ', moved to : ' + vehicleLocation);
var latitude = vehicleLocation[0];
var longitude = vehicleLocation[1];
Ti.App.fireEvent('fbController:moveMarker', {
id : vehicleId,
latitude : latitude,
longitude : longitude
});
});
/* Removes vehicle markers from the map when they exit the query */
geoQuery.on("key_exited", function(vehicleId) {
Ti.API.info('Geofire exited driver, id ' + vehicleId);
Ti.App.fireEvent('fbController:removeMarker', {
id : vehicleId
});
});
});
</script>
</body>
</html>
then on the View window we add the html to the container view
var webview = Ti.UI.createWebView({
url: Ti.Filesystem.resourcesDirectory + '/webview/firebase/index.html',
width: 0,
height: 0,
top: 0,
left: 0,
visible: false
});
webview.addEventListener('load', function() {
Ti.App.fireEvent('firebase:init', {
latitude : latitude,
longitude : longitude
});
});
$.container.add(webview);
create some events to communicate with the Firebase Webview
var Map = require('ti.map');
var mapview;
var annotations = [];
Ti.App.addEventListener('fbController:addMarker', function(e) {
Ti.API.info('Firebase add marker: ' + e.id);
annotations[e.id] = Map.createAnnotation({
latitude: e.latitude,
longitude: e.longitude,
image: '/images/icon-car.png'
});
if (Ti.App.Properties.getBool('locationEnabled') == true) {
mapview.addAnnotation(annotations[e.id]);
} else {
}
});
Ti.App.addEventListener('fbController:moveMarker', function(e) {
Ti.API.info('Firebase move marker: ' + e.id);
annotations[e.id].setLatitude(e.latitude);
annotations[e.id].setLongitude(e.longitude);
});
Ti.App.addEventListener('fbController:removeMarker', function(e) {
Ti.API.info('Firebase remove marker: ' + e.id);
if (Ti.App.Properties.getBool('locationEnabled') == true) {
mapview.removeAnnotation(annotations[e.id]);
delete annotations[e.id];
}
});
Anything you need can ask me, I am using this on an App and is working good, try to improving everyday but with this setup we did the job :), hope this helps, greetings
I do it as this way in my Android app:
Install module ln.vanvianen.android.gcm
Create instance in alloy.js: var FCM = require('actions/gcm');// pub/sub
In app/lib/actions/gcm.js create instance of module and logic to interact with fcm.
As I use promises on gcm.js, link bluebird library in alloy.js: var Promise = require('bluebird/bluebird');
Run my app: appc run -p android -T device
To test run CURL command or use firebase notification console: https://console.firebase.google.com/project/your-project-name/notification
Firebase Notification Console example
Works for me with: sdk-version 5.5.0.GA
I am trying to scrape all links of special kind (boxscore-links) from this website http://www.basketball-reference.com/teams/GSW/2016_games.html and then visit them one by one, scraping some information from every visited link. For a beginning I want to scrape all links, visit them one by one and get a title of website. The problem is that it always prints the same title and the same current url (initial url) even though it clearly has to be a new one. Seems to me that there is a problem with 'this'-keyword...
(Don't look at limit of links, I took the code from sample on github of casperjs and I left it for console not to be overloaded.)
This is my code:
var casper = require("casper").create({
verbose: true
});
// The base links array
var links = [ "http://www.basketball-reference.com/teams/GSW/2016_games.html" ];
// If we don't set a limit, it could go on forever
var upTo = ~~casper.cli.get(0) || 10;
var currentLink = 0;
// Get the links, and add them to the links array
function addLinks(link) {
this.then(function() {
var found = this.evaluate(searchLinks);
this.echo(found.length + " links found on " + link);
links = links.concat(found);
});
}
// Fetch all <a> elements from the page and return
// the ones which contains a href starting with 'http://'
function searchLinks() {
var links = document.querySelectorAll('#teams_games td:nth-child(5) a');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('href');
});
}
// Just opens the page and prints the title
function start(link) {
this.start(link, function() {
this.wait(5000, function() {
this.echo('Page title: ' + this.getTitle());
this.echo('Current url: ' + this.getCurrentUrl());
});
});
}
// As long as it has a next link, and is under the maximum limit, will keep running
function check() {
if (links[currentLink] && currentLink < upTo) {
this.echo('--- Link ' + currentLink + ' ---');
start.call(this, links[currentLink]);
addLinks.call(this, links[currentLink]);
currentLink++;
this.run(check);
} else {
this.echo("All done.");
this.exit();
}
}
casper.start().then(function() {
this.echo("Starting");
});
casper.run(check);
Considering an array of URLs, you can iterate over them, visiting each in succession with something like the following:
casper.each(urls, function(self, url) {
self.thenOpen(url, function(){
this.echo('Opening: ' + url);
// Do Whatever
});
});
Obviously this will not find links on a page, but it is a nice way to go over a known set of URLs.
Have a question regarding contentsync phonegap plugin (https://www.npmjs.com/package/phonegap-plugin-contentsync).
Will be very appreciated if someone could help.
The core of the problem is that my REST server allowing me to download .epub files (witch are same as .zip) only by sending GET request similar to:
https://test-api.books.com/api/getPublishedEpub?session_hash=1235&publication_id=abv1243'
Providing this link to the plugin '.sync' call I get a 'Invalid request method' response from the server...
While trying to download ordinary .zip everything works just fine.
var pub_id = $scope.currentBook.publication_id, epubUrl = 'https://test-api.books.com/api/getEpub?session_hash='
+ $rootScope.sessionHash+ '&publication_id=' + pub_id;
var downloadBtn = document.getElementById("downloadBtn");
console.log('Download cliked');
var sync = ContentSync.sync({ src: epubUrl, id: 'book'+ pub_id});
sync.on('progress', function (data) {
downloadBtn.innerHTML = "Downloading: " + data.progress + "%";
});
sync.on('complete', function (data) {
console.log(data.localPath);
for (var x = 1; x <= 17; x++) {
var fileUrl = "file://" + data.localPath;
console.log(fileUrl);
}
downloadBtn.innerHTML = 'Download';
});
I am using google map api. I am having an issue with Google base map. When i load Google hybrid or aerial, it gives me following result.
https://www.dropbox.com/s/u51hegt7hu03gz9/Untitled.png?dl=0
Some tiles are missing on the map.
Missing tiles: https://www.dropbox.com/s/5vlp86xf4iote32/Untitled2.png?dl=0
My code is:
google.maps.event.addListener(mapA, 'maptypeid_changed', function () {
var mapTypeId = mapA.getMapTypeId();
if (mapTypeId != "basemap")
mapTileSource = [];
if (mapTypeId == google.maps.MapTypeId.HYBRID) {
mapTileSource.push("http://khm1.google.com/kh/v=134&x={0}&y={1}&z={2}&s=Gal");
mapTileSource.push("http://mt0.google.com/vt/lyrs=h#177290279&hl=en&x={0}&y={1}&z={2}&s=Gal");
}
else if (mapTypeId == google.maps.MapTypeId.ROADMAP) {
mapTileSource.push("http://mt1.google.com/vt/lyrs=m#113&hl=hu&x={0}&y={1}&z={2}&s=Gal");
}
else if (mapTypeId == google.maps.MapTypeId.SATELLITE) {
mapTileSource.push("http://khm1.google.com/kh/v=134&x={0}&y={1}&z={2}&s=Gal");
}
else if (mapTypeId == google.maps.MapTypeId.TERRAIN) {
mapTileSource.push("http://mt1.google.com/vt/lyrs=t#131,r#176163100&hl=en&x={0}&y={1}&z={2}&s=Gal");
}
});
Some tiles are missing on the view.
I have tried this:
function CoordMapType(tileSize) {
debugger;
this.tileSize = tileSize;
}
CoordMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.innerHTML = coord;
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.fontSize = '10';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.borderColor = '#AAAAAA';
return div;
};
mapA.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
And i have also tried this:
google.maps.event.addListenerOnce(mapA, 'tilesloaded', function() {
google.maps.event.addListenerOnce(mapA, 'tilesloaded', function() {
google.maps.event.trigger(mapA, 'resize');
});
});
But they did not work for me.
Can anyone please tell me the way to load all the tiles on the map?
Thank you
Try set higher version (the number after m# or h# etc.) and use url directly in web broswer (check if tile in this version exists)
http://mt1.google.com/vt/lyrs=m#901000000&hl=en&x=4&y=10&z=5&s=Ga
or check your cache layer (if you use)
In my option for googleSatellite :
get error - http://khm0.google.com/kh/v=149&hl=en&x=18&y=9&z=5&s=Galileo
******* ok - http://khm0.google.com/kh/v=165&hl=en&x=18&y=9&z=5&s=Galileo
Here's a working example of mapbox with google maps hybrid satellite view: https://github.com/SnakeO/mapbox-with-google-maps-hybrid-tiles
I am trying to dynamically set the cluster title, rollover text, of clustered icons. I want the cluster count/total to be used in the rollover text.
Through console.log I am able to see that the title has been changed to that set for var txt. It also works with alert( txt ). The default title for a cluster is "" and does not seem to be getting updated and stays at the default value.
Currently I am setting the title in google.maps.event.addListener( markerClusterer, 'mouseover', function( cluster ) {}).
I'm thinking that my code continues to execute and that might be the reason I don't see the change but I haven't been able to narrow it down.
var latlng = new google.maps.LatLng( lat, lng );
var qs = location.search;
var options = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map( mapId[0], options );
google.maps.event.addListener( map, 'idle', function() {
var bounds = map.getBounds();
downloadXML( ABSPATH + 'xml/maps/markers.php' + qs + '&bounds=' + bounds, function( data ) {
var xml = parseXml( data );
var markers = xml.documentElement.getElementsByTagName( "marker" );
var markerArray = [];
for ( var i = 0; i < markers.length; i++ ) {
var attributes = getMarkerAttributes( markers[i] );
var marker = createMarker( attributes );
// Add marker to marker array
markerArray.push(marker);
}
// Define the marker clusterer
var clusterOptions = {
zoomOnClick: false,
gridSize: 1
}
var markerClusterer = new MarkerClusterer( map, markerArray, clusterOptions );
// Listen for a cluster to be clicked
google.maps.event.addListener( markerClusterer, 'clusterclick', function( cluster ) {
combineInfoWindows( cluster );
});
// Listen for a cluster to be hovered and set title
google.maps.event.addListener( markerClusterer, 'mouseover', function( cluster ) {
var txt = 'There are ' + cluster.getSize() + ' properties at this location.';
//alert( txt );
console.log( cluster );
markerClusterer.setTitle( txt );
});
}); // downloadXML
}); // google.maps.event.addListener( map, 'idle', ... )
Any help would be greatly appreciated. Thanks!
EDIT: 1
I have a solution based on the suggested solution by Rick.
I have modified the onAdd method.
/**
* Adds the icon to the DOM.
*/
ClusterIcon.prototype.onAdd = function () {
var cClusterIcon = this;
// MY CHANGES - START
this.cluster_.markerClusterer_.title_ = 'There are ' + this.cluster_.getSize() + ' properties at this location.';
// MY CHANGES - END
this.div_ = document.createElement("div");
if (this.visible_) {
this.show();
}
...
};
EDIT: 2 - FINAL SOLUTION
Moved changes to show method versus previous onAdd method as Rick had suggested. Change is made in a file outside of the original source file for MarkerClustererPlus.
/**
* Positions and shows the icon.
*/
ClusterIcon.prototype.show = function () {
if (this.div_) {
var pos = this.getPosFromLatLng_(this.center_);
this.div_.style.cssText = this.createCss(pos);
if (this.cluster_.printable_) {
// (Would like to use "width: inherit;" below, but doesn't work with MSIE)
this.div_.innerHTML = "<img src='" + this.url_ + "'><div style='position: absolute; top: 0px; left: 0px; width: " + this.width_ + "px;'>" + this.sums_.text + "</div>";
} else {
this.div_.innerHTML = this.sums_.text;
}
//this.div_.title = this.cluster_.getMarkerClusterer().getTitle();
// MY SOLUTION BELOW
this.div_.title = 'There are ' + this.cluster_.getSize() + ' properties at this location.';
this.div_.style.display = "";
}
this.visible_ = true;
};
Are you using this for clustering markers? Did you extend it to make your own setTitle function? If not, You'll have to make your own label. It's not actually a marker per se.
Edit: Didn't know this existed.
The cluster icons just pull the title from the MCOptions. I don't see where ClusterIcon or Cluster has a setTitle function, so I'd think the best bet would be overriding the ClusterIcon show prototype yourself and setting it there.
> ClusterIcon.prototype.show =
> function () { if (this.div_) {
> var pos = this.getPosFromLatLng_(this.center_);
> this.div_.style.cssText = this.createCss(pos);
> if (this.cluster_.printable_) {
> // (Would like to use "width: inherit;" below, but doesn't work with MSIE)
> this.div_.innerHTML = "<img src='" + this.url_ + "'><div style='position: absolute; top: 0px; left: 0px; width: " + this.width_
> + "px;'>" + this.sums_.text + "</div>";
> } else {
> this.div_.innerHTML = this.sums_.text;
> }
> this.div_.title = **** Your stuff here ***
> this.div_.style.display = ""; } this.visible_ = true; };
Your problem is that you are trying to assign the mouseover event listener (where you set the title) to a MarkerClusterer, but to define a mouseover listener, you have to pass a Cluster.
There is a MarkerClusterer.getClusters() function that will return an Array of the Cluster instances. You want to loop over that Array and pass an instance of Cluster to your mouseover event listeners. If you check the reference doc and scroll down to the MarkerClusterer Events section of the doc, the row for mouseover defines the Argument to be:
c:Cluster
Which is in contrast to events like clusteringbegin and clusteringend, which define the Argument to be:
mc:MarkerClusterer
Having said all that, I'm not sure there is an easy way to set the title for each Cluster. That class does not have a setTitle function. The setTitle on the MarkerClusterer just applies the title to all of the Cluster instances. And I've double checked in JavaScript; there is no setTitle function on the Cluster class. Your best option right now seems to be to dynamically create the content you want to display within the mouseover handler for each Cluster. You could create an InfoBox and then close it on a Cluster mouseoet event. Not the simplest solution ever, but it will get you where you want to be.
I know this is an old question, but it ranked high on Google for my search. Anyway, here is what I did thanks to tips from this page:
google.maps.event.addListener(markerCluster, 'mouseover', function (c) {
if(c.clusterIcon_.div_){
c.clusterIcon_.div_.title = c.getSize() + ' businesses in this area';
}
});
I can't guarantee it will be compatible with future versions of MarkerClusterer Plus since I'm using "private" properties clusterIcon_ and div_.