I have a problem setting up an html button that must ask for geolocation, show and put the marker in the correct place:
First, I started loading the method:
google.maps.event.addDomListener(window, 'load', init_map);
Then:
function init_map()
{
var lima = new google.maps.LatLng(-12.043333,-77.028333);
var browserSupportFlag = new Boolean();
var mapDiv = document.getElementById('map_canvas');
map = new google.maps.Map(mapDiv,
{
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: lima
});
var distanceWidget = new DistanceWidget(map, initialLocation);
google.maps.event.addListener(distanceWidget, 'position_changed', function()
{
displayInfo(distanceWidget);
}
);
google.maps.event.addDomListener(document.getElementById('get_latlng'), 'click', get_location(map,distanceWidget.get_marker()));
}
The HTML:
<button type="button" id="get_latlng">Get your current location</button>
But what it does, is that the listener loads itself, what I want it to do is that it executes when I click the button.
wrap the call into a function:
google.maps.event
.addDomListener(document.getElementById('get_latlng'),
'click',
function(){get_location(map,distanceWidget.get_marker());});
Related
I am using the below code to add a Close Button to Google Street Maps.
The problem is, it is also adding the Close button below Google Map as well.
How can I stop the button been placed below the map.
function initialize() {
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(53.976988, -8.327637),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE
]
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Create Close button
var btn = document.createElement("BUTTON");
btn.setAttribute('class','gbtn');
btn.setAttribute('id','button');
btn.innerHTML = '×';
// Get close button and insert it into streetView
// #button can be any dom element
var closeButton = document.body.appendChild(btn),
controlPosition = google.maps.ControlPosition.RIGHT_TOP;
// Assumes map has been initiated
var streetView = map.getStreetView();
// Hide useless and tiny default close button
streetView.setOptions({ enableCloseButton: false });
// Add to street view
streetView.controls[controlPosition].push( closeButton );
// Listen for click event on custom button
// Can also be $(document).on('click') if using jQuery
google.maps.event.addDomListener(closeButton, 'click', function(){
streetView.setVisible(false);
});
}
This script is creating a problem that when i used to load google map in bootstrap modal.
First time map is loaded but with second time map is not loaded fully.
<script>
var map = '';
function showmap(){
if(!map){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(23.6459, 81.9217),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
google.maps.event.addListener(map, "click", function(){
document.getElementById("latitude").value = map.getCenter().lat();
document.getElementById("longitude").value = map.getCenter().lng();
marker.setPosition(map.getCenter());
//document.getElementById("zoom").value = map.getZoom();
});
google.maps.event.addListener(map, "center_changed", function(){
document.getElementById("latitude").value = map.getCenter().lat();
document.getElementById("longitude").value = map.getCenter().lng();
marker.setPosition(map.getCenter());
//document.getElementById("zoom").value = map.getZoom();
});
}
}
</script>
<script>
var map = '';
function showmap(){
if(!map){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(23.6459, 81.9217),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
^^^^ Remove var from here and it works fine
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
google.maps.event.addListener(map, "click", function(){
document.getElementById("latitude").value = map.getCenter().lat();
document.getElementById("longitude").value = map.getCenter().lng();
marker.setPosition(map.getCenter());
});
}
}
</script>
in function when assigning map variable again in modal is creating problem so to remove conflict just remove var map when assingin it to google.maps
This is meant to be a comment but I am not allowed to add comments at this time.
I also experience the same in an MVC app. Modal content (resource title and map) is loaded as partial view from a controller action. First map loads nicely but next map(s) are clipped and only top left part shows. Using Bootstrap 3.
It is worth mentioning that if you refresh the page, the map loads well but that's not practical.
I using this technique: http://www.geocodezip.com/v3_MW_example_map2.html
I want to have the first info window open when the map loads.
I also want to be able to center the map when you click a location link.
Can anyone help?
JS:
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var map = null;
function initialize() {
// create the map
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(50.822096, -0.375736),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
// add the points
var point = new google.maps.LatLng(50.810438, -0.374925);
var center = new google.maps.LatLng(50.810438, -0.374925);
var marker = createMarker(point,"Worthing","<p><b>Worthing</b><br>1-13 Buckingham Road,<br>Worthing,<br>West Sussex,<br>BN11 1TH</p>")
var point = new google.maps.LatLng(51.497421,-0.141604);
var center = new google.maps.LatLng(51.497421,-0.141604);
var marker = createMarker(point,"London","<p><b>London</b><br>Portland House,<br>Bressenden Place,<br>London,<br>SW1E 5RS</p>")
var point = new google.maps.LatLng(-33.867487,151.20699);
var center = new google.maps.LatLng(-33.867487,151.20699);
var marker = createMarker(point,"Sydney","<p><b>Sydney</b><br>Level 1, Cosco House,<br>95-101 Sussex Street,<br>Sydney NSW<br>Australia 2000</p>")
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
$('#side_bar li:first-child').addClass("active");
$('#side_bar li').click(function(){
$('#side_bar li').removeClass("active");
$(this).addClass("active");
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var iconBase = '../Themes/FreshEgg/assets/img/';
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5,
icon: iconBase + 'map_marker_24x46.png',
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
infowindow.setContent(contentString);
infowindow.open(map,marker);
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<li><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a></li>';
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML:
<ul class="list-inline" id="side_bar"></ul>
<div id="map_canvas"></div>
Add a 4th parameter to your createMarker() function for the default state of markers - createMarker(latlng, name, html, show) - where show will be a boolean variable: true to open on load, false to leave it closed. Then when you call createMarker() in your initialize() method specify true for the marker you want open on load.
Then in createMarker() add a condition that handles this for you - something like:
if (show) {
google.maps.event.trigger(marker, "click");
/*if you're going to take this approach, make sure this is triggered after
*you specify your listener
*alternately, you can also setContent() and open() your infoWindow here
*/
}
To have the map pan to the center when you click on the marker, you first need to disable the auto panning of the map when an infoWindow is open. This can be done where you set the options for your infoWindow:
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50),
disableAutoPan : true
});
Then, in your listener for the click event on the marker add the function to panTo(LatLng) the position of the marker on your map.
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
map.panTo(marker.getPosition());
});
I'm trying to create my own map using google map.
I want to create a list showing all existing markers on the map. When user clicks on one button/link from the list, the corresponding marker will be centered and its infoWindow will be displayed, i.e. the same effects as the user clicks on the marker.
I have tried a number of solutions, but I could get none of them working. Can anyone please offer me a simple solution for this? Thanks in advance!
My existing code is as follows,
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(19.642588,151.171875),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick1 = function() {
var marker = this;
infoWindow.setContent('content of infowindow');
infoWindow.open(map, marker);
};
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(19.642588,151.171875),
});
google.maps.event.addListener(marker1, 'click', onMarkerClick1);
this won't center the map on it, but will move so the whole balloon is visible
http://econym.org.uk/gmap/example_map2.htm
as simple as i can get it. yes, please use GMarker etc.
don't forget this in the header <script src="http://maps.google.com/maps?...
you'll need html that includes
<div id="map" style="width: 550px; height: 450px"></div>
<div id="side_bar">Marker One<br /></div>
and then javascript
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(19.642588, 151.171875), 8);
var point = new GLatLng(19.642588, 151.171875);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("this marker has been clicked");
});
function myclick(i) {
GEvent.trigger(marker, "click");
}
map.addOverlay(marker);
Currently I'm trying to set markers on a map based on user clicks. I have tried everything I can think of and NOTHING works. It seems as though my map doesn't even detect clicks. Currently, I'm trying to keep the script as simple as possible, I'm just trying to detect clicks on the map at this point:
<script type="text/javascript">
function initialize()
{
<!-- Set the initial location-->
var latlng = new google.maps.LatLng(44, -71);
<!-- initialization options -->
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
<!-- The map variable
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- END INITIALIZE -->
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
</script>
I've tried so many variants on this sort of code, every it never works. If I change it to "addDomListener(window, ...)" it works, but never using the map as the listener. Ideas?
EDIT: OK, solved it by changing the function somewhat and changing its location in the script:
<script type="text/javascript">
function initialize() {
<!-- Set the initial location -->
var latlng = new google.maps.LatLng(44, -71);
<!-- initialization options -->
var myOptions = {
minZoom: 3,
zoom: 8,
maxZoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
<!-- The map variable-->
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- Add the functionality of placing a marker on a click-->
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
alert('You clicked the map.'+event.latLng);
});
<!-- END INITIALIZE -->
}
google.maps.event.addDomListener(window, 'load', initialize);
<!-- Add the functionality of placing a marker on a click-->
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
alert('You clicked the map.'+event.latLng);
});
</script>
I guess you place this code in improper place (or do it in improper time). Recently I've encountered with the same problem and it took some time to solve it. Look what works for me:
var mapservice = {};
mapservice.map = {};
mapservice.options = {};
mapservice.putMarker = {};
mapservice.init = function (divName, textSearch)
{
this.options =
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map($(divName)[0], this.options);
google.maps.event.addListener(this.map, 'click', function (event)
{
mapservice.putMarker(event.latLng);
});
}
mapservice.putMarker = function (location)
{
//...
}