I'm learning sencha touch and trying put markers on the google map. I've looked at most of the examples online but I'm unable to get the marker and the infoWindow to work. Below is my code:
myApp.views.MapCard = Ext.extend(Ext.Panel, {
id: "mapcard",
layout: 'card',
initComponent: function() {
this.map = new Ext.Map({
useCurrentLocation: true,
mapOptions: {
zoom: 12,
},
});
this.panel = new Ext.Panel({
layout: 'fit',
items: this.map,
});
this.items = this.panel;
myApp.views.MapCard.superclass.initComponent.call(this);
refresh = function(theMap) {
var geoTag = {
lat: '47.584863',
longi: '-122.147026',
text: 'Hello World',
}
addMarker(geoTag, theMap);
}
addMarker = function(geoTag, theMap) {
var latLng = new google.maps.LatLng(geoTag.lat, geoTag.longi);
var marker = new google.maps.Marker({
map: theMap.map,
position: latLng
});
google.maps.event.addListener(marker, "click", function() {
geoTagBubble.setContent(tweet.text);
geoTagBubble.open(theMap.map, marker);
});
};
geoTagBubble = new google.maps.InfoWindow();
refresh(this.map);
},
});
Ext.reg('mapcard', myApp.views.MapCard);
I'm also unable to get the current location of the user, I'm pretty sure that the map is not loaded during the initComponent. I would be calling a json service to pull the lat/lon and loop through later. If there is a better implementation, please let me know!
Thanks a ton!
Here's a pretty minimal example application that demonstrates this:
http://septa.mobi
You can find the source code under view-source or on GitHub:
https://github.com/mjumbewu/Septnuts/
Here's panel where marker are added to a map:
https://github.com/mjumbewu/Septnuts/blob/master/src/Septnuts/MapPanel.js
WARNING: there is a bug in Sencha Touch 1.x that prevents embedded Google Maps from receiving ANY click events
You need to include this patch after including sencha-touch.js in order for any click listener on the map to work:
https://github.com/mjumbewu/Septnuts/blob/master/src/sencha-maptouch-patch.js
Related
I am working with api google maps now I am development with vuejs now exist the posibility from bind a property to the property title from markers, for example
this is my component on vuejs
Vue.component('root-map',{
template: `
<div id="sidebar_builder"
style="width: 100%; height: 600px;">
</div>
`,
data: function(){
return {
map:null,
marker:{
title: 'hello'
}
}
},
mounted: function () {
this.$nextTick(function () {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
this.map = new google.maps.Map(document.getElementById('sidebar_builder'),mapOptions);
var marker_icon= new google.maps.Marker({
position: myLatlng,
title: this.marker.title}); // the most important part
marker_icon.setMap(this.map);
});
}
});
Now when I want change the property markers.title='I change' and happend nothing, the markers on the maps keep 'hello', could you please how do I do it ? If can do it without use method native from api google maps thanks!!
you can use watch
watch: {
marker() {
this.reDrawMarkers()
}
}
more info vue watcher https://v2.vuejs.org/v2/guide/computed.html#Watchers
if you dont know how to redraw markers also you can look google documentation
https://developers.google.com/maps/documentation/javascript/examples/marker-remove
I want when the user clicks on a marker, I would like a popup displays to him with some information (for example: lets say the markers represent locations, when he clicks on a marker it displays to him all information of this location)
What is the simplest way to do this?
See the Google Maps documentation for how to setup event listeners on your markers. You should be able to do that in your Blaze template code, most likely in the onCreated() or onRendered() of the template.
Solution is:
marker.addListener('click', function() {
swal({
title: "More details",
text: "Type what you want here",
});
});
Regards,
Add this package https://github.com/dburles/meteor-google-maps
HTML
{{> googleMap name="map" options=mapOptions}}
Client JS
Meteor.startup(function() {
GoogleMaps.load({
v: '3',
key: 'YOUR_KEY'
});
});
Template.YOUR_TEMPLATE.helpers({
mapOptions: () => {
if (GoogleMaps.loaded()) {
return {
center: new google.maps.LatLng(YOUR_MAP_LAT, YOUR_MAP_LNG),
zoom: 1
};
}
}
});
Template.YOUR_TEMPLATE.onRendered(function(){
GoogleMaps.ready('map', function(map) {
let marker = new google.maps.Marker({
position: new google.maps.LatLng(YOUR_MARKER_LAT, YOUR_MARKER_LNG),
map: map.instance
})
let infowindow = new google.maps.InfoWindow({
content: 'SOME CONTENT'
})
marker.addListener('click', function(event){
infowindow.open(map.instance, marker);
})
});
});
I'm using geoXMl3 to parse multiple kml files at a time.
I'm getting polygons plotted on the map. when I click on the polygon an info-window pops up. I'm not getting from where this info-window is coming up
My requirement is I want to edit the content of info-window through some java-script object
My java-script object will be like
popUpDetails = {'district-name':'content'}.
Not getting how to pass this in my parser
I have refered few links like:
https://code.google.com/p/geoxml3/wiki/Usage
and also how could I put data dynamically from database in infowindow of a certain polygon?
I'm parsing kml files this way:
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var parser = new geoXML3.parser({
map: map,
processStyles: true,
zoom: false,
});
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < ListofPathsofkmlfiles.length; i++) {
parser.parse([ListofPathsofkmlfiles[i]]);
}
Advance thanks for your help
I have finally figured out solution for same.
You need to overwrite createPolygon attribute of your parser for same.
var districtInfoMap = {doc_url1:infowindow_content1, doc_url2:infowindow_content2 };
var parser = new geoXML3.parser({
createPolygon: mapDrawingToType(),
map: map,
processStyles: true,
zoom: false,
singleInfoWindow: true,
});
mapDrawingToType = function() {
return function(placemark, doc) {
var polygon = geoXML3.instances[geoXML3.instances.length-1].createPolygon(placemark, doc);
if(polygon.infoWindow) {
polygon.infoWindowOptions.content = districtInfoMap[doc.baseUrl];
}
return polygon;
}
}
Here I have made one object containing the map of district url and window content you have to show.
This will overwrite the default behavior of how your infowindow is displayed and the desired content you want to show will be displayed.
If you still face any issue please do let me know.
There are a few posts regarding issues with google map api centering properly. I understand the following resizes the map:
google.maps.event.trigger(map, 'resize');
I was able to get the map to display properly within the div element on first page display. However, when navigating back to the html page that holds the map, only a fraction of the map displays within the div. The problem i'm having is figuring out how to incorporate this resize trigger. I'm new to SPA's and Durandal, here is my viewmodel responsible for the map:
define(['async!https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'], function () {
var vm = {
title: 'Home View',
attached: initialize,
activate: function () {
toastr.success('Map View Activated');
}
};
return vm;
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
});
Sure, you'd want to do this when the map is visible, i.e. it has a height and width. The best event for this is typically the composition complete event. So:
var vm = {
title: 'Home View',
attached: initialize,
activate: function () {
toastr.success('Map View Activated');
},
compositionComplete: function() {
google.maps.event.trigger(map, 'resize');
}
};
See the list and description of all callbacks here: Hooking Lifecycle Callbacks
Im creating a mobile app with Phonegap, Backbone.js, Require.js and PageSlider (https://github.com/ccoenraets/PageSlider).
I want to display a simple Google Map with a marker. The template looks like:
<div class='main-content' id='map-container'>
<a href="geo:51.903679,-8.468274">
<div id="map-canvas"></div>
</a>
</div>
Here is the view:
define(function (require) {
"use strict";
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone'),
tpl = require('text!tpl/Map.html'),
side_nav = require('text!tpl/SideNav.html'),
template = _.template(tpl),
map, myLatlng, mapOptions, marker;
return Backbone.View.extend({
initialize: function () {
this.render();
},
initMap: function () {
myLatlng = new google.maps.LatLng(51.903679, -8.468274);
mapOptions = {
center: myLatlng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(this.$el.find('#map-canvas')[0],
mapOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Christians Brothers College Cork'
});
},
render: function () {
this.$el.html(template({side_nav:side_nav}));
this.initMap();
},
});
});
Here is a link to the app. When you click on "location", the map renders perfectly. But when you navigate anywhere else, then back to location, only a tiny portion of the map can be seen in the top left hand corner.
I tried doing, which was suggested here:
google.maps.event.trigger(map, 'resize').
but to no avail. Any ideas?
Your view works on a node not appended to the DOM, thus without size, a situation Google Map is not very fond of. It is your router, via PageSlider, that does append the node after your render function has occurred.
Here is a demo of your predicament : http://jsfiddle.net/3C7g3/
You have several options to solve it:
call google.maps.event.trigger(map, 'resize') after the node is inserted into the DOM (this bit of code corresponds to your router entry for the map)
// assuming you stored the map object in your view
require(["app/views/Map"], function (Map) {
var view = new Map();
slider.slidePage(view.$el);
google.maps.event.trigger(view.map, 'resize');
});
http://jsfiddle.net/3C7g3/1/
insert the node into DOM before calling render. In your case, that probably means removing render from the view.initialize and calling view.render after container.append(page); in your slidePageFrom method.
http://jsfiddle.net/3C7g3/2/
a more hackish way would be to temporarily add the element to the DOM, apply Google Maps, and then remove it from the DOM
initMap: function () {
// assuming a temp class that hides the element. For example,
// .temp {position: absolute; visibility:hidden; }
this.$el.addClass('temp');
$('body').append(this.$el);
// ...
this.$el.remove();
this.$el.removeClass('temp');
}
http://jsfiddle.net/3C7g3/3/