Set Sencha Touch Map Location - dictionary

Set Sencha Touch Map Location
Hi All, I am trying to simply set the Sencha Touch 2 map object to a specific zipcode. I an setting the config to to {useCurrentLoction: true} which works fine but after hours of research I can't seem to find a way to tell the map object to reposition to another city, or address or specifically a zipcode somewhere else in the US.
It looks like the Google API has these features but this include:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Doesn't recognize the api calls that Google is using in their docs. Google says to get am API access key but this needs to run from multiple locations so I was hoping to achieve this without needing to get a key.
Has anyone been able to reposition the Sencha Touch 2 map object with the API accessed by the above (maps.google.com/maps/api/js?sensor=true) ?
Thanks!

Just include <script src="http://maps.google.com/maps/api/js?sensor=true"></script> in your HTML file
Then in your view create a xtype map, and then in the listener add an event painted like this:
listeners:
{
painted: function( component, eOpts ) {
console.log("Entered paint");
gotoAddress();
var map = Ext.getCmp('mymap');
map.setMapCenter(addr);
}
}
// Location function add the parameter as desired address to navigate.
// This also includes showing mapper and info window
function gotoAddress() {
var address = "enter the address required";
var map = Ext.getCmp('mymap');
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
addr= results[0].geometry.location;
map.setMapCenter(results[0].geometry.location);
marker.setMap(map.getMap());
marker.setPosition(results[0].geometry.location);
infowindow.setContent(address);
infowindow.open(map.getMap(),marker);
} else {
alert('Sorry Address could not be traced: ' + status);
}
});
}
Note: Paint is the event that gets called every time you navigate to page where you have used the map. Initialize event will be created only once when you create this page.

Related

How to update an InfoWindowText after the initial click on a marker using Google Maps with Flutter?

User clicks on the marker on a google map on a flutter app on an android device
As expected infowindow appears
User clicks on infowindow, nothing happens
It was expected to see Title and Snipped updated
I tried with multiple versions and codes.
mapController.onInfoWindowTapped.add((marker) {
_launchURL(data[i]["urlmember"]);
// options
print(marker.id.toString());
print(data[i]["urlmember"]);
MarkerOptions( infoWindowText: InfoWindowText("counseling","find us on second service"));
);
The expected result is for the infowindow to display the new title and snipped
The below code snippet is in the example app in the Flutter Google Maps Package (https://pub.dartlang.org/packages/google_maps_flutter) in the file 'place_marker.dart':
void _updateSelectedMarker(MarkerOptions changes) {
controller.updateMarker(_selectedMarker, changes);
}
void _onMarkerTapped(Marker marker) {
if (_selectedMarker != null) {
_updateSelectedMarker(
const MarkerOptions(icon: BitmapDescriptor.defaultMarker),
);
}
setState(() {
_selectedMarker = marker;
});
_updateSelectedMarker(
MarkerOptions(
icon: BitmapDescriptor.defaultMarkerWithHue(
BitmapDescriptor.hueGreen,
),
),
);
}
I believe that the way you have it set up currently, you click on an info window associated with an pre-existing marker, and that triggers the creation of another marker with no "position" (ie; a LatLng value, which is required for marker objects), but has infoWindow text properties. This would explain why nothing happens when you click on the infoWindow; it's essentially creating a marker and placing it nowhere; which means there wouldn't be anywhere to display the corresponding infoWindow text either.
I believe the logic you are looking to implement is: when a user clicks on the infoWindow, it should trigger an update to the already existing marker. To achieve this, you may implement something similar as the code snippet I shared above, except for using onInfoWindowTapped instead of onMarkerTapped.

I want to hide map markers while in street view. (Google maps v3)

When a user drags the little yellow man onto the screen, it transitions into a full screen street view. This is good. However, it also litters the screen with my map markers. This is bad.
The hard way of solving this is for me to loop through every possible marker I could have on the map, storing which were visible before street view was initiated, and then restoring them when street view is done. But I can't find a street view initiation event anywhere in the API documentation.
The better and easier solution would be to set some option like "Don't show my markers while in street view."
Edit: managed to find a way to monitor the state of street view. How to detect enter and exit streetView in Google Maps API v3
However, I'd still like to know if there's a way to just... not show markers when in street view.
Final edit:
I'm including the 'solution'. This is a simplified version of what I ended up writing, because the layers each touch various modules throughout the application, so they aren't as simply handled as is shown.
Final solution:
// Add listener for when we go into street view.
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function() {
var setAllMap = function (mapObjects, state) {
for (var i = 0, len = mapObjects.length; i < len; i++) {
mapObjects[i].setMap(state);
}
};
// If street view was just activated
if (this.getVisible()) {
// hide everything
setAllMap(LayerOne, null);
setAllMap(LayerTwo, null);
setAllMap(LayerThree, null);
// If we're leaving street view
} else {
// show the marker layers that were on
setAllMap(LayerTwo, true);
setAllMap(LayerThree, true);
// If visibility state was true
if (LayerOne.getVisible()) {
setAllMap(LayerOne, true);
}
if (LayerTwo.getVisible()) {
setAllMap(LayerTwo, true);
}
if (LayerThree.getVisible()) {
setAllMap(LayerThree, true);
}
}
});
Using the listener in the answer you posted, see when street view is active and do setAllMap(null); to hide the markers. When it leaves street view, do setAllMap(map); to show the markers again.
Edit (from the Google Maps documentation):
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}

google maps api v3: handle user click on map type control?

I need to handle the case when a user clicks on a mapTypeControl differently than when it's set through map.setMapTypeId(). How do I listen for clicks on map type controls?
You can't listen for events on the default UI control set. But if you are strictly focused on differentiating between clicks on the mapTypeControl and map.setMapTypeId(), you could use the fact that you control the code that may call setMapTypeId() and add some state management code:
// First, add a new state var:
var typeIdChangedInCode = false;
// Then, anywhere in your code where you call setMapTypeId(), add this:
typeIdChangedInCode = true;
map.setMapTypeId( newTypeId );
// Finally, include state checking code in the map event listener:
google.maps.event.addListener( map, "maptypeid_changed", function( evnt ) {
if ( typeIdChangedInCode ) {
//handle the scenario in the non-click way, but REMEMBER TO:
typeIdChangedInCode = false;
}
else {
//handle the scenario in the map click way
}
});
This should set you up to handle the two different occurrences in the way you need.
google.maps.event.addListener(map, 'maptypeid_changed', function(e){
alert(map.getMapTypeId());
});

jQuery Mobile + jQuery UI google maps + Fusion Markers

this has been baking my noodle for months, I'll be honest, I am a designer not a programmer so this type of scripting is a bit harder than the average jquery/javascript that I'm used too.
I can't find any basic documentation on how to implement it, apart from this but it's not massively intuitive - http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-mobile-example.html
I've tried making a JSfiddle, but I can't even get it to work (now working thanks to Tsar)
I've built a jQuery mobile app and I'm desperate to get the geo-location functionality working with fusion table markers (from my fusion table) and to be allowed to click on the fusion table markers to reveal a info window. This info window will be constructed in fusion tables.
I need the geo-location to center the map on the devices current location - if the geo-location is not available or denied by device user, then the map needs to be centered on these co-ordinates 52.450939, -1.721002.
What would be the next level is to have the the jQuery mobile UI pop-up window but this is not critical, just the standard bubble on the map is fine.
A updated JSFiddle... http://jsfiddle.net/twGHC/30/
My fusion table number is: 1260763
Default location is: (only if Geo location is not available) 52.450939, -1.721002
Zoom level: 13
Any advice would be awesome, please feel free to JSfiddle it. Thanks in advance.
Here's a working solution, which detects user's location, drops a marker on it and plots the map with your Fusion Markers. As per Google Maps v3 API documentation:
$(function() {
var position = new google.maps.LatLng(52.450939, -1.721002);
getCurrentPosition = function(callback) {
// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(pos) {
position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
callback(position);
}, callback(position));
} // Try Google Gears Geolocation
else if (google.gears) {
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(
function(pos) {
position = new google.maps.LatLng(pos.latitude,pos.longitude);
callback(position);
}, callback(position));
} // Browser doesn't support Geolocation
else {
// Drop the user off in Coventry =)
callback(position);
}
};
// call the above function
getCurrentPosition(InitMap);
});
function InitMap(pos) {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: pos,
zoom: 14,
mapTypeId: 'roadmap'
});
var marker = new google.maps.Marker({
position: pos,
animation: google.maps.Animation.DROP,
map: map,
title: "You are here, mate!"
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Geocodable address',
from: '1260763'
},
});
layer.setMap(map);
};
When user denies tracking of his location, exception is caught in getCurrentPosition, however, 2nd optional parameter in this function is an exception handler, so what I did is simply passed in callback(position) so that default location sets on the map. If you don't want to do it, move out the map initializer code from InitMap into separate function and call it instead, when exceptions are caught, to display a blank map.
See it in action here: http://jsfiddle.net/twGHC/36/
P.S. In case your next question is "how to add a balloon pop-up on marker click", here's what you need to do.
Here is how to do it with jquery-ui-map:
http://jsfiddle.net/rweCf/1/
http://jsfiddle.net/rweCf/1/embedded/result/
If you just want to change within a certain radius of the client position this is how you would do it
http://jsfiddle.net/Ywknf/1/ (client location is the initial point so everyone can see the results)
Here is the code if the url isnt working or the trunk code changed
$(function() {
$('#map_canvas').gmap({'center': '52.450939, -1.721002', 'zoom': 10, 'disableDefaultUI': true, 'mapTypeId': 'terrain'}).bind('init', function(event, map) {
$('#map_canvas').gmap('getCurrentPosition', function(results, status) {
if ( status === 'OK' ) {
var position = new google.maps.LatLng(results.coords.latitude, results.coords.longitude);
var marker = $('#map_canvas').gmap('get', 'markers > client' );
if ( !marker ) {
$('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': position, 'bounds': true });
} else {
marker.setPosition(position);
map.panTo(position);
}
} else if ( status === 'NOT_SUPPORTED' ) {
$('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': $('#map_canvas').gmap('get', 'map').getCenter(), 'bounds': true });
}
});
$('#map_canvas').gmap('loadFusion', { 'query': { 'select': 'Geocodable address', 'from': 1260763 } } );
});
});

Draggable Marker to Update Lat and Long Fields

I wonder whether someone may be able to help me please.
I've put some coding together (please see below) whereby a user goes onto a HTML form, they type in an address and click a 'Search' button. Upon doing this, the location is plotted on the Google map and the Lat and Long co-oridnates are automatically entered into the associated text boxes on my form.
What I would like to do, if at all possible, is for the marker to be draggable so the user can fine tune the location, and as they drag the marker, I'd like for the Lat and Long fields to change their
associated co-ordinates.
In addition, I'd also like, if at all possible, to have a field on the form called 'NearestAddress' to show the nearest address to where the marker has been dragged to.
I've managed to make the markers draggable but they don't update the Latitude and Longitude text boxes. I'm also unsure how to add the functionality to show the updated address to where the marker has been dragged to.
(function() {
// Defining some global variables
var map, geocoder, myMarker, infowindow;
window.onload = function() {
// Creating a new map
var options = {
zoom: 3,
center: new google.maps.LatLng(55.378051,-3.435973),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Getting a reference to the HTML form
var form = document.getElementById('LocationSearchForm');
// Catching the forms submit event
form.onsubmit = function() {
// Getting the address from the text input
var address = document.getElementById('Address').value;
// Making the Geocoder call
getCoordinates(address);
// Preventing the form from doing a page submit
return false;
}
}
// Create a function the will return the coordinates for the address
function getCoordinates(address) {
// Check to see if we already have a geocoded object. If not we create one
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
// Creating a GeocoderRequest object
var geocoderRequest = {
address: address
}
// Making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// Check if status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Center the map on the returned location
map.setCenter(results[0].geometry.location);
// Creating a new marker and adding it to the map
var myMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable:true
});
document.getElementById('Latitude').value= results[0].geometry.location.lat();
document.getElementById('Longitude').value= results[0].geometry.location.lng();
google.maps.event.addListener(myMarker, 'dragend', function(evt){
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt){
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
}
});
}
})();
I am new to Google maps development and I'm not even sure whether it's possible to achieve what I want. I've been working on this now for a few weeks and it's driving me a little crazy, so if someone could perhaps point me in the right direction it would gratefully be received.
Many thanks and kind regards
Chris
Instead of evt.latLng.lat().toFixed(3) you should just use the myMarker object and grab it's position.
Getting the nearest address is not that easy, but requires reverse geocoding, and to be honest I don't see the point in doing it. You would have to make special cases for the occurences where there couldn't be found a closest address and stuff like that.
If you really want to do it though there is a webservice you can call to do it.

Resources