About marker Google API v3? - google-maps-api-3

My idea is using handling click event for map to create markers. Then handling click event for marker to show lat() of this marker. But, it always show lat() of final marker in Array. I can't solved this error. Please help me this problem. Thank all
function addMarker(location){
var goldStar = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "yellow",
fillOpacity: 0.8,
scale: 1,
strokeColor: "gold",
strokeWeight: 14
};
mar = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: goldStar, //or use image
title: "Hello",
map: map
});
makerArray.push(mar);
//console.log(makerArray.length);
//click_Marker(mar);
google.maps.event.addListener(mar, 'click', function(){
alert(mar.getPosition().lat());
});}
function initialize(){
var mapOptions = {
zoom: 12,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);;
GetCurrentLocation(map);
//Hướng dẫn đi
directionDisplay.setMap(map);
directionDisplay.setPanel(document.getElementById("direction"));
getData();
showListRestaurant();
//Thêm địa điểm vào bản đồ
google.maps.event.addListener(map, 'click', function(event){
addMarker(event.latLng);
});
}

If that is your complete code then you are missing the var declartion on your mar variable.
mar = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: goldStar, //or use image
title: "Hello",
map: map
});
Should instead have a var at the beginning
var mar = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: goldStar, //or use image
title: "Hello",
map: map
});
This would explain your problem because each marker you are adding is a reference to the same object, therefore every time you add a new click event to mar, you are in fact updating the click event of the same object. The result being that all the click events have the same value.
Here's a working jsfiddle:
http://jsfiddle.net/NGja4/50/

Related

Google Map v3 API: "InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number"

I have been getting the "InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number" message and have reviewed previous posts but can't seem to find which line is causing the issue.
The below code seems to work but throws the above warning. I have tried parseFloat on lat and long values and on setPosition value but no joy.
const flightPlanCoordinates1100_0 = [{
lat: 51.52386762,
lng: -0.059058666
},
{
lat: 51.52394638,
lng: -0.058520453
},
{
lat: 51.52716833,
lng: -0.05617915
}, {
lat: 51.54674506,
lng: -0.059390801
},
];
// define the polyline attributes
const flightPath1100_0 = new google.maps.Polyline({
path: flightPlanCoordinates1100_0,
geodesic: true,
strokeColor: "Aqua",
strokeOpacity: 1.0,
strokeWeight: 2,
draggable: true,
map: map
});
// create an invisible marker for the label listener
labelMarker = new google.maps.Marker({
position: flightPath1100_0,
map: map,
visible: false
});
var myLabel = new Label();
// lets add an event listener, if you move the mouse over the line, it will tell you the track id
flightPath1100_0.addListener('mouseover', function(e) {
labelMarker.setPosition(e.latLng)
myLabel.bindTo('position', labelMarker, 'position');
// Type the Track Id name here, this can be loaded using excel macro
myLabel.set('text', "1100");
myLabel.setMap(map);
});
flightPath1100_0.setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
}
The issue as MrUpsidDown pointed out was that the position was not in latlng format, the below changes seemed to have worked
labelMarker = new google.maps.Marker({
position: new google.maps.LatLng(flightPath1100_0),
map: map,
visible: false
});

How do I redraw a google maps marker on click?

I have a google map with a set of map markers. I chose to draw the map markers with a function called pinSymbol() - instead of using the default image.
I want to change the color of the pin when it is clicked, but I can't get it to update. With the current code I can change the property of the icon, I can see this with console.log(marker), however it won't update the color on the map.
Question: How do I redraw the icon on click?
This is my code.
// Go through all restaurants and get facebook info,
// then create a marker for each one.
restaurants.forEach(function(restaurant){
getFacebookInfo(restaurant);
}); // end forEach loop
// Get data from Facebook Graph API and create a marker
function getFacebookInfo(restaurant){
$.ajax({
url : '/restaurants/' + restaurant.id,
type : 'GET',
dataType:'json',
success : function(data) {
restaurant.about = data.about;
createMarker(restaurant);
},
error : function(request, error) {
console.log(error);
alert("We're having some trouble getting a restaurant's info from Facebook. " +
"Please check your internet connection and try refreshing the page.")
}
});
}
// Create a marker on the map for a location
function createMarker(restaurant){
var position = restaurant.location;
var infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
restaurant.marker = new google.maps.Marker({
position: position,
map: map,
icon: pinSymbol('#CD212A', '#CD212A'),
name: restaurant.name,
id: restaurant.id,
about: restaurant.about,
animation: google.maps.Animation.DROP
});
// Push the marker to array of markers
markers.push(restaurant.marker);
// Call populateInfoWindow function
populateInfoWindow(restaurant.marker, infowindow);
// Add infowindow as a property to restaurant
// this makes it available for use outside this function.
restaurant.infowindow = infowindow;
This is where I'm stuck:
// Open infowindow when marker is clicked and change color
restaurant.marker.addListener('click', function(){
this.icon = pinSymbol('#EED4D9', '#EED4D9');
console.log(restaurant.marker);
infowindow.open(map, this);
});
}
pinSymbol Function
// Create pin for google map marker
function pinSymbol(color, strokeColor) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: strokeColor,
strokeWeight: 1,
scale: 1,
labelOrigin: new google.maps.Point(0,-29)
};
}
There is no (documented) .icon property of a marker. Don't use it. Use the documented .setIcon method:
// Open infowindow when marker is clicked and change color
restaurant.marker.addListener('click', function() {
this.setIcon(pinSymbol('#EED4D9', '#EED4D9'));
console.log(restaurant.marker);
infowindow.open(map, this);
});
proof of concept fiddle
code snippet:
var geocoder;
var map;
var markers = [];
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
createMarker({
name: "center",
id: 2,
about: "",
location: {
lat: 37.4419,
lng: -122.1419
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
// Create a marker on the map for a location
function createMarker(restaurant) {
var position = restaurant.location;
var infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
restaurant.marker = new google.maps.Marker({
position: position,
map: map,
icon: pinSymbol('#CD212A', '#CD212A'),
name: restaurant.name,
id: restaurant.id,
about: restaurant.about,
animation: google.maps.Animation.DROP
});
// Push the marker to array of markers
markers.push(restaurant.marker);
// Call populateInfoWindow function
populateInfoWindow(restaurant.marker, infowindow);
// Add infowindow as a property to restaurant
// this makes it available for use outside this function.
restaurant.infowindow = infowindow;
// Open infowindow when marker is clicked and change color
restaurant.marker.addListener('click', function() {
if (this.getIcon().fillColor != "#EED4D9") {
this.setIcon(pinSymbol('#EED4D9', '#EED4D9'));
} else {
this.setIcon(pinSymbol('#CD212A', '#CD212A'));
}
console.log(restaurant.marker);
infowindow.open(map, this);
});
}
// Create pin for google map marker
function pinSymbol(color, strokeColor) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: strokeColor,
strokeWeight: 1,
scale: 1,
labelOrigin: new google.maps.Point(0, -29)
};
}
function populateInfoWindow(marker, infowindow) {
infowindow.setContent("content");
};
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

How to iterate a list with itemtap (sencha touch 2)

I would like to know how to use itemtap to iterate through a list. I have a list right now which shows multiple items and when the user clicks on each, a map will appear showing the marker of the item. However, every item on the list seems to be showing the same thing. It is just showing the latest item on the list (first at the top). I would like to know what I'm doing wrong with the itemtap function. Thank You!!
Heres my controller where the itemtap function is:
Ext.define('demo.controller.News',{
extend:'Ext.app.Controller',
config:{
refs:{
NewsContainer:'newscontainer'
},
control:{
'newscontainer new list':{
itemtap:function(list, index, target, record){
var detailsView = Ext.create('demo.view.Mapo');
detailsView.setData(record.data);
this.getNewsContainer().push(detailsView);
}
}
}
}
});
And here is my map:
Ext.define('demo.view.Mapo', {
extend: 'Ext.Map',
xtype:'mapo',
config: {
title:'Incident Location',
iconCls:'maps',
layout:'fit',
draggable: true,
useCurrentLocation: true,
mapOptions: {
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
},
initialize: function(){
var me = this;
me.on('maprender', function(comp, map){
var image = 'resources/images/current.png';
new google.maps.Marker({
position: new google.maps.LatLng(
this._geo.getLatitude(),
this._geo.getLongitude()
),
icon: image,
map: map,
title: "Current Location",
animation: google.maps.Animation.DROP
});
//Circle Radius
// var populationOptions = {
// strokeColor: "#FF0000",
// strokeOpacity: 0.8,
// strokeWeight: 1,
// fillColor: "#FF0000",
// fillOpacity: 0.35,
// map: map,
// center: new google.maps.LatLng(this._geo.getLatitude(),
// this._geo.getLongitude()),
// radius: 2000
// };
// var t = new google.maps.Circle(populationOptions);
for (i=0; i<Ext.getStore('news').getData().length; i++){
var data = Ext.getStore('news').getData().items[i].data
};
new google.maps.Marker({
position: new google.maps.LatLng(
data.Latitude,
data.Longitude
),
// icon: image,
map: map,
title: "Incident Location",
animation: google.maps.Animation.BOUNCE
});
});
me.callParent(arguments);
}
});

Custom Google Map v3 Markers for Each Location

I have a map I am developing. The basic Google RED DROPLET icon shows up as my marker image. How can I get my own custom image to come up? I have individual images for just about all 50 of my markers (will be company's logo).
Can someone help? Here's the link.
Any help setting custom markers with the code I have presently would be great.
From actual code:
var image = './beachflag.png';
[...]
var marker=new google.maps.Marker({
position: myPosition,
map: map,
icon: image
});
Your code:
var point = new google.maps.LatLng(37.984798,-121.312094);
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>');
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
What you need to do:
var point = new google.maps.LatLng(37.984798,-121.312094);
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>', image);
And change CreateMarker:
function createMarker(latlng, html, img) {
// Note here the addition of the img parameter
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
***icon: img,***
zIndex: Math.round(latlng.lat()*-100000)<<5
});
[...]
EDIT
A quick test with your code and my mods.
You can select the image and later associated that image with your lat and long, in this case there is one function that creates the marker.
if(location.category=="TEAMNAME"){
var image='img/blueMarker.png';
}
if(location.category=="TEAMNAME2"){
var image='img/redMarker.png';
}
function displayLocation(location){
var content = '<strong><p>Team: ' +location.category + '</strong>';
var latLng = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true,
visible: true,
title: location.category,
icon: image
});
/*Content window asociated to created markers*/
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);
infowindow.open(map, marker);
});
return marker;
}

Show just first and last marker on path

For generate markers on google maps I call the function displayLocation with the next code:
for (var i=0; i<data.length; i++) {
displayLocation(data[i]);
}
On displayLocation I create an array with all the positions for the path I want to create and the markers, I just wanna show the first and the last marker on the path.
My displayLocation function looks like:
function displayLocation(location){
var latLng = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
if(location.nombreequipo=="AST1"){
var path = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
rutaAST1.push(path);
}
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: imagen,
draggable: false,
visible: true,
title: location.nombreequipo
});
arrayMarcadores.push(marker);
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);
infowindow.open(map, marker);
});
return marker;
}
In this part of the code I set the path, I call:
varBool = true;
dibujaRutaAST1(map, rutaAST1, varBool);
And the function is:
var ruta = null;
function dibujaRutaAST1(mapa, rutaVar, varBool){
if(!ruta){
var coordRuta = rutaVar;
console.log("En función dibujo de rutas AST1: "+rutaVar);
ruta= new google.maps.Polyline({
map: mapa,
path: coordRuta,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 3
});
console.log(ruta);
}if(varBool){
ruta.setMap(mapa);
}else{
ruta.setMap(null);
}
}
Iteration on markers array:
function mostrarMarcas(nombreEquipo){
for(var i=0;i<arrayMarcadores.length;i++){
if(arrayMarcadores[i].title==nombreEquipo){
arrayMarcadores[i].setVisible(true);
}
}
}
Any suggestion?
Thanks.
Finally I just create the first and the last marker from my array with all the points:
if(rutaAST1.length!=0){
dibujaRutaAST1(map, rutaAST1, varBool);
var imagen ='img/markers/blue_MarkerA.png';
var markerIniAST1 = new google.maps.Marker({
position: rutaAST1[0],
map: map,
icon: imagen,
draggable: false,
visible: true,
title: "AST1"
});
google.maps.event.addListener(markerIniAST1, 'click', function(){
infowindow.setContent(contentAST1[0]);
infowindow.open(map, markerIniAST1);
});
var markerFinAST1 = new google.maps.Marker({
position: rutaAST1[rutaAST1.length-1],
map: map,
icon: imagen,
draggable: false,
visible: true,
title: "AST1"
});
google.maps.event.addListener(markerFinAST1, 'click', function(){
infowindow.setContent(contentAST1[contentAST1.length-1]);
infowindow.open(map, markerFinAST1);
});
}
Thank you so much for helping me to clear my mind with this part of my code :)

Resources