I have a Goole map in a contact page in which i would like to show the infoWindow used on Google map.
Go to that link : Gmap
And click on the marker. A info window should appear.
My question is : How do I make the same thing append on my Website ?
Ps : I know how to build a google.maps.InfoWindow object, but i don't want to create the html myself.
This part of the Google Map's Docs explains this: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
Define your lat long coordinate
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
Set your map otions
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
Initialize your map
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Set the content for your infowWindow
var contentString = '<b>Set content for infowindow here in HTML<b>';
Intialize your infoWindow with the content string.
var infowindow = new google.maps.InfoWindow({
content: contentString
});
Place your marker at the previously defined marker on the above defined map
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
And finally just bind the 'click' event on the marker to the infowindow you created.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Related
In the Google Maps API I have set the various location in the Map and set out the Location with their unique address when I try to click on the location the address pop up box should have to be appear on the location place but now in my map when I click anywhere the pop up box shown up in the one place.
Make sure that you open your infoWindow on your marker's onClick listener like this:
var contentString = marker.getPosition().toString();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: location,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
Here's a complete sample implementation using Maps JavaScript API that you can try: https://jsfiddle.net/smga08/anw2hfot/14/
I have implemented a custom overlay. I want to add an event which will pop an info window when I click the overlay.
function initMap() {
var map = new google.maps.Map(document.getElementById('okmap'), {
zoom: 4,
center: {lat: 35.0000, lng: 103.0000}
});
for (var n in nodes) {
var myMarker = new MyMarker(map, {latlng: new google.maps.LatLng(nodes[n][0], nodes[n][1]),
image: 'assets/img/light-green.png',
labelText: (Math.random() * 100).toFixed(0)});
markers.push(myMarker);
var infowindow = new google.maps.InfoWindow({
content: n
});
myMarker.addListener('click', function() {
infowindow.open(map, myMarker);
});
}
}
But it is not working!
I faced a simliar problem some time back. Here are two things that helped me.
I am considering the main overlay element to be a div.
In your MyMarker.draw function make sure that you are using a pane that has access to the DOM events.e.g.
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(div);
See https://developers.google.com/maps/documentation/javascript/customoverlays#initialize for more details.
Make sure you define an event listener, also in the MyMarker.draw function.
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(self, "click");
});
What happened past weeks i don't know if google messed things up again. My map stopped working.
I transferred the app Angular for routes. When the contact page loads, initializeMap function called.
I got new browser api key from google console which is not like old. I enabled Javascript Map Api. I entered my URLs in credential.
Sometimes it gives error invalidkey*** but only sometimes.
It works on my domain if i put everything in one single file.
It also works on codepen. I don't know why? There is no error to debug this thing. My beloved javascript.
http://codepen.io/emrahatilkan/pen/bVwzrR
Edit: This is about angular definitely.
Google Map Link in index.html:
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"></script>
My URL: index.html/#/contact
I don't know if it is relevant but contact.html is inside pages/ folder.
My Code is in main.js:
function initializeMap() {
console.log('init map'); //this outputs to console
var mapOptions = {
center: { lat: 39.7944417, lng: 30.4935026 },
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: false,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Some Title'
});
var infowindow = new google.maps.InfoWindow({
content: '<h5>Some Title</h5>'
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
I'm trying to show different maps in different views but charging 1 on 1 map view, switch to another map not load, there is no mistake to launch the browser so I could not decide because I can not keep showing other maps. I'm doing as follows:
$scope.cargarUbicacion = function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
latitud_actual = position.coords.latitude;
longitud_actual = position.coords.longitude;
console.log(latitud_actual);
console.log(longitud_actual);
var mapOptions = {
center: new google.maps.LatLng(latitud_actual, longitud_actual),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("mapa_ubicacion"), mapOptions);
$scope.setMarker(map, new google.maps.LatLng(latitud_actual, longitud_actual), 'Yo', '');
});
}
}
$scope.setMarker = function(map, position, title, content) {
var marker;
var markerOptions = {
position: position,
map: map,
title: title,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
};
marker = new google.maps.Marker(markerOptions);
markers.push(marker); // add marker to array
google.maps.event.addListener(marker, 'click', function () {
// close window if not undefined
if (infoWindow !== void 0) {
infoWindow.close();
}
// create new window
var infoWindowOptions = {
content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open(map, marker);
});
}
I am using this code in multiple controllers, my idea is encapsulated and can occupy the same code 1 time in several views. Whenever I change the id map to avoid that problem, thinking that this was the cause that did not load the map.
Any idea how to do what I need or that is failing to load maps?
Thank you.
I personnaly do the following :
The code taht you want to reuse put it into a global variable such as :
Then into your control, you can extend it with this mapExtend
global.MapExtend = function($scope, $rootScope, leafletData) {
// ... all your functions to reuse
};
// In your main controler, extend it with your map capabilities with angular.extend
angular.extend(myCtrl, new MapExtend($scope, $rootScope, leafletData));
I am using
http://jsfiddle.net/xSPAA/371/
//Add the requried module 'angular-ui' as a dependency
angular.module('maptesting', ['ui.map','ui.event']);
function MapCtrl($scope) {
var ll = new google.maps.LatLng(45, -73);
$scope.mapOptions = {
center: ll,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Markers should be added after map is loaded
$scope.onMapIdle = function() {
if ($scope.myMarkers === undefined){
var marker = new google.maps.Marker({
map: $scope.myMap,
position: ll
});
$scope.myMarkers = [marker, ];
}
};
$scope.markerClicked = function(m) {
window.alert("clicked");
};
}
plunker to show google map. I need to show a specific location map that a user will enter into a text box.
How can I do it?
Do I need to use Geo Location API?
Can any one give sample code or plunker?
Below is the working example :
http://www.victorshi.com/blog/post/Use-Geolocation-API-with-Angularjs
Example
Also check below url:
http://www.benfarrell.com/2013/11/05/some-geolocation-and-google-mapping-services-in-angularjs/
Google Location Service
http://jsfiddle.net/mrajcok/pEq6X/
directive 'googlePlaces'