set a google marker in sencha touch - google-maps-api-3

I have some problem when i set a marker, I found out this code for generate a google map and it works. But now i want to set a marker with my current position, and the problem is that i don't know where is the google map object, without this the marker isn't displayed.
this.mapg = new Ext.Map({
useCurrentLocation:true,
geo:new Ext.util.GeoLocation({
autoUpdate:true,
timeout:2000,
listeners:{
locationupdate: function(geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);
// Set the marker
marker = new google.maps.Marker({
map:geo.map,//??? No idea where is the google map object
position: center
});
if (this.rendered)
this.update(center);
else
this.on('activate', this.onUpdate, this, {single: true, data: center});
},
locationerror: function(geo){
alert('got geo error');
}
}
})
});

After spending a day searching trough google, i founded this solution:
ascom.views.MapG = Ext.extend(Ext.Panel, {
layout:'card',
initComponent: function(){
var infowindow = new google.maps.InfoWindow({
content: 'prova'
});
this.map = new Ext.Map({
mapOptions : {
zoom: 12,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
useCurrentLocation: true,
listeners: {
maprender : function(comp, map){
var marker = new google.maps.Marker({
position: map.center,
title : 'Infofactory HQ',
map: map
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
}
});
this.panel = new Ext.Panel({
layout:'fit',
items:this.map,
dockedItems:[
{
xtype:'toolbar',
title:'Map GO'
}
]
});
this.items = this.panel;
ascom.views.MapG.superclass.initComponent.call(this);
}
});

It's in:
mapg.map
You don't show what mapg is a member of but you could access it explicitly.

Related

Issue on Accessing JSON Values in Google Maps Infowindow (infoBox)

Using jQuery Ajax call I am trying to show some Markers and their associated info from database on the Map as:
$(document).ready(function () {
var markers = [];
var infoBox = null;
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(49.241943, -122.889318),
mapTypeId: google.maps.MapTypeId.ROADMAP,
sensor: 'true'
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$("#g-one-1").on("click",function(){
var data = 'data=' + "open";
var reqOne = $.ajax({
type: "POST",
url: "assets/gone.php",
data: data,
cache: false,
dataType: "JSON",
beforeSend: function () {console.log(data);},
complete: function () {console.log("Data Is Sent");}
});
reqOne.fail(function() { console.log( "There is an Error" ); });
reqOne.done(function(data){
for (var i = 0; i < data.length; i++) {
var current = data[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
markers.push(marker);
var projName = data[i].name;
google.maps.event.addListener(markers[i], "click", function (e) {
if (!infoBox) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
} else {
infoBox.setOptions({
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
infoBox.setPosition(this.getPosition());
}
});
}
});
});
});
The code is working fine until showing the infobox value which I tried to get each of points lat, lng and name by using current.name current.lng and current.lat
in infoBox content as
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
but I am getting same .name , .lng, and .lat in all boxes? As far as I know I have a loop at
for (var i = 0; i < data.length; i++) {
var current = data[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
to assign the lat long values from json to markers but it seems it is not accessible here!
Can yopu please let me know how to fix this
Simple fix using function closure. Replace this code with a call to createMarker(current):
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
markers.push(marker);
var projName = data[i].name;
google.maps.event.addListener(markers[i], "click", function (e) {
if (!infoBox) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
} else {
infoBox.setOptions({
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
infoBox.setPosition(this.getPosition());
}
});
where createMarker is:
createMarker(current) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
markers.push(marker);
var projName = current.name;
google.maps.event.addListener(marker, "click", function (e) {
if (!infoBox) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
} else {
infoBox.setOptions({
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
infoBox.setPosition(this.getPosition());
}
});
}

Adding Google maps InfoWindow Dynamically Wordpress

I am trying to add a Google maps InfoWindow Dynamically to Wordpress, this is the code that is currently working with a custom marker I have tried several functions for infowindows but it seems to be breaking and not loading the map. not sure what I might be doing wrong.
this works I just need to add a infoWindow
<script type="text/javascript">
//<![CDATA[
function load() {
var styles =
[
{
"stylers": [
{ "lightness": 1 },
{ "saturation": -76 },
{ "hue": "#3bff00" }
]
}
];
var lat = <?php echo $lat; ?>;
var lng = <?php echo $lng; ?>;
// coordinates to latLng
var latlng = new google.maps.LatLng(lat, lng);
// map Options
var myOptions = {
zoom: 14,
scrollwheel: false,
center: latlng,
mapTypeId: 'Styled'
};
//draw a map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: '/wp-content/themes/bills_theme/images/pin_bills.png',
});
}
// call the function
load();
//]]>
</script>
A simple infowindow would be (not tested):
//draw a map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: '/wp-content/themes/bills_theme/images/pin_bills.png',
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function(e) {
infowindow.setContent("Hello world");
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, "click");
}
// call the function
Just add this code:
var contentString = 'put your content here.';
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: latlng,
maxWidth: 200
});
infowindow.open(map);
});
More info about Info Window you can read HERE.

Google Map Marker not being replaced

please excuse a noob at this. When a user clicks on a map, it should place a marker and open an info window - as per this example: http://www.geocodezip.com/v3_example_click2add_infowindow.html
The code below almost works correctly, except that the mark is not replaced - a new one is added. Any ideas really, really gratefully received. Thank you.
<script>
var map = null;
var markersArray = [];
function initialize() {
var latlng = new google.maps.LatLng(0.0000, 0.0000);
var settings = {
zoom: 2,
mapTypeControl:true,
center: latlng,
panControl:true,
zoomControl:true,
streetViewControl:false,
overviewMapControl:false,
rotateControl:true,
scaleControl: true,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'white'
};
map = new google.maps.Map(document.getElementById('map'), settings);
function placeMarker(location) {
var marker , i ;
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
icon:'http://www.desperatesailors.com/templates/Live/media/mapicons/info.png',
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng() +
'<br>Only the first four decimal places needed'
});
infowindow.open(map,marker);
}
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
window.onload = initialize;
</script>
This is a scope issue. You are always delcaring marker in the placeMarker function so if( marker ) will always be false. Move the variable declaration out of that function:
<script>
var marker;
var map = null;
var markersArray = [];
function initialize() {
var latlng = new google.maps.LatLng(0.0000, 0.0000);
var settings = {
zoom: 2,
mapTypeControl:true,
center: latlng,
panControl:true,
zoomControl:true,
streetViewControl:false,
overviewMapControl:false,
rotateControl:true,
scaleControl: true,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'white'
};
map = new google.maps.Map(document.getElementById('map'), settings);
function placeMarker(location) {
var i ;
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
icon:'http://www.desperatesailors.com/templates/Live/media/mapicons/info.png',
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng() +
'<br>Only the first four decimal places needed'
});
infowindow.open(map,marker);
}
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
window.onload = initialize;
</script>
Your placeMarker function creates a new (empty) marker variable in the local scope.
function placeMarker(location) {
var marker , i ;
if ( marker ) {
It will always create a new marker. Change it to:
var marker = null;
function placeMarker(location) {
if ( marker ) {

Unable to show the latitude and longitude in the InfoWindow

I have a java script function which I am using to display a marker on the selected position of the map and also show the latitude and longitude at the marker's location in a InfoWindow.
I could display the marker at any location but unable to show a InfoWindow with the coordinates.
This is the function:
function init()
{
var mapoptions=
{
center: new google.maps.LatLng(17.379064211298, 78.478946685791),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map=new google.maps.Map(document.getElementById("map_can"), mapoptions);
var marker;
google.maps.event.addListener(map,'click',function(event)
{
marker= new google.maps.Marker({position:event.latLng,map:map});
});
var iwindow= new google.maps.InfoWindow();
google.maps.event.addListener(marker,'click',function(event)
{
iwindow.setContent(event.latLng.lat()+","+event.latLng.lng());
iwindow.open(map,marker);
});
}
Where am I wrong? Suggestions please.
This is because you attach event to an empty marker object (it is unassigned at the moment when you invoke
google.maps.event.addListener(marker,'click',function(event) { ... });
Try attaching click event to the marker after you create it, e.g.:
google.maps.event.addListener(map,'click',function(event)
{
marker= new google.maps.Marker({position:event.latLng,map:map});
google.maps.event.addListener(marker,'click',function(event)
{
iwindow.setContent(event.latLng.lat()+","+event.latLng.lng());
iwindow.open(map,marker);
});
});
You can try this snipped code :
function addMarkerWithTimeout(position, timeout, id) {
window.setTimeout(function () {
markers.push(new google.maps.Marker({
position: position,
map: map,
icon: image1,
title: "whatever!",
draggable: true,
animation: google.maps.Animation.ROUTE
}));
google.maps.event.addListener(map, 'click', function (event)
{
google.maps.event.addListener(markers[id], 'click', function (event)
{
infoWindow.setContent(event.latLng.lat() + "," + event.latLng.lng());
infoWindow.open(map, markers[id]);
});
});
}, timeout);
}

Google Maps API with backbone, how to bind an event

I've seen several other posts about this, but the answers from those responses don't work for me.
The other responses:
How do I bind a google maps geocoder.geocode() callback function
Backbone.js with Google Maps - problems with this and listeners
My code:
var ns = namespace('camelcase.geomanager.map');
ns.Site = Backbone.Model.extend({
url: '/site'
});
ns.Sites = Backbone.Collection.extend({
model: ns.Site
});
ns.MapView = Backbone.View.extend({
initialize: function() {
this.markers = new Array();
// Create the Google Map
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.googleMap = new google.maps.Map(this.$(".mapCanvas")[0], mapOptions);
// Register events
this.collection.on('add', this.addSite, this);
this.collection.on('remove', this.removeSite, this);
},
addSite: function(model) {
// Get model attributes
var elementId = model.get('elementId');
var latitude = model.get('latitude');
var longitude = model.get('longitude');
var id = model.get('id');
var notes = model.get('notes');
var title = ""+id;
// Create icon and marker
var icon = '/resources/img/elements/' + elementId + '_marker.png';
var latLng = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({
position: latLng,
title: title,
map: this.googleMap,
icon: icon
});
// Load info window
var siteBubbleTemplate = _.template($('#siteBubbleTemplate').html());
var siteContent = $(siteBubbleTemplate({
siteId: id,
siteNotes: notes
}))[0];
var infoWindow = new google.maps.InfoWindow({
content: siteContent
});
// Show info window when clicking on marker
_.bindAll(this, this.openSite);
google.maps.event.addListener(marker, 'click', this.openSite(id));
this.markers.push({
id: id,
marker: marker,
infoWindow: infoWindow
});
},
openSite: function(id) {
var marker;
for (var c=0; c<this.markers.length; c++) {
marker = this.markers[c];
// Open the appropriate marker info window
if (marker.id == id) {
marker.infoWindow.open(googleMap, marker.marker);
}
// Close the rest
else {
marker.infoWindow.close();
}
}
}
});
The offending line:
google.maps.event.addListener(marker, 'click', this.openSite(id));
The error being reported in firebug:
TypeError: func is undefined
underscore.js (line 482)
I suspect this.marker is the problem, since you should be able to just refer to it by name.
google.maps.event.addListener(marker, 'click', this.openSite(id));
Looks like it was a scoping issue. I solved my problem with the following code:
// Show info window when clicking on marker
_.bindAll(this);
var _self = this;
var doSomething = function(event) {
_self.openSite({
event: event
});
};
google.maps.event.addListener(marker, 'click', doSomething);
I'll give the answer to whoever can best explain why this works.
In a model/collection event handler, Backbone sets 'this' to the model/collection which raised the event. If you call _.bindAll(this) in your view's initialize(), 'this' will be set to the view in your event handlers. Check out this jsfiddle: http://jsfiddle.net/9cvVv/339/ and see what happens when you uncomment _.bindAll(this);
var MyView = Backbone.View.extend({
initialize: function() {
// TODO: uncomment this line
// _.bindAll(this);
this.collection.bind('myEvent', this.onDoSomething);
},
updateCollection: function() {
this.collection.doSomething();
},
onDoSomething: function() {
if (this.models && typeof this.models.length === 'number') {
alert('"this" is a collection.');
}
else if (this.collection) {
alert('"this" is the view.');
}
else {
alert('"this" is something else.');
}
}
});

Resources