Google Map setCenter to a newly clicked area - javascript

I have the following code. In the section regarding the 'click' event I want to get the lang of the clicked-point but I have been unable to do so so far. What shall I do?
PROBLEM: I need to setCenter of the map to the newly clicked area.
<div id='map-container' style="width: 500px; height: 500px;">
</div>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(35.7, 51.3999)
};
map = new google.maps.Map(document.getElementById('map-container'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'موقعیت خود را انتخاب کنید'
});
google.maps.event.addListener(document.getElementById('map-container'), 'click', function() {
map.setZoom(10);
map.setCenter(35.7, 51.3999);
console.log(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

(1) To get the lat/lng of the point which is being clicked in Google Maps, you have to use click eventListener of Google Maps like
google.maps.event.addListener(map, 'click', function(event) {
});
(2) Then to get the position of the maps that is being clicked,
event.latLng //returns the position
event.latLng.ob //returns lat
event.latLng.pb //returns lng
(3) Now using setCenter(pos), mark the clicked area as map's center like
map.setCenter(event.latLng);
Finally,
google.maps.event.addListener(map, 'click', function(event) {
map.setCenter(event.latLng);
});
Sample Fiddle
EDIT: can you please also tell me how at the same time move the red marker to the newly clicked area?
google.maps.event.addListener(map, 'click', function (event) {
marker.setPosition(event.latLng); //set the position to marker
map.setCenter(marker.getPosition()); //Now set marker to map's center
});
Fiddle

Related

How to change marker postion on Google Map API

I am using google map on my site and here is google map code:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:440px;width:700px;'>
<div id='gmap_canvas' style='height:440px;width:700px;'></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style>
</div>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(51.5073509, -0.12775829999998223),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.5073509, -0.12775829999998223)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>Title</strong><br>London, United Kingdom<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
and getting this map output:
Currently, I have a div which highlight in Red color and marker is displaying beside Red area so I want to move to the left side.
Now I want to move marker on left side and don't want to use center position because I am showing contents on red area on below example:
Any idea how to move the marker on the top left side?
Thanks.
You can easly shift the map assigning a new center .. (the new coord are for sample)
var newCenter = new google.maps.LatLng(50.5073509, 0.1200)
map.setCenter(newCenter);
You can change the the marker by javascript function
function changeMarkerPosition(marker) {
var latlng = new google.maps.LatLng(-24.397, 140.644);
marker.setPosition(latlng);
}
For more information See this link

Google Maps Infobox on Custom HTML Marker

I'm trying to get an infobox to open after clicking an overlay(custom HTML marker).
This map shows a typical marker and a customer HTML marker. When I click the typical marker, the infobox opens correctly. When I click the custom HTML marker, the infobox doesn't open with error msg: TypeError: anchor.getPosition is not a function. This relates to the incorrect parameters I'm passing to infobox.open(). It expects a marker, but since I'm clicking an overlay (custom HTML marker), the parameter passed is incorrect.
How can I adjust the infobox.open() function so that it accepts my overlay as a parameter?
<!DOCTYPE html>
<html>
<style>
#map{
height: 600px;
width: 600px;
}
</style>
<body>
<div id="map"></div>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script src="....path/to/custom-html-markers-google-maps.js"></script>
<script>
var infobox = new InfoBox({
disableAutoPan: false,
maxWidth: 300,
pixelOffset: new google.maps.Size(-75, -70),
zIndex: null,
boxStyle: {width: '150px'},
infoBoxClearance: new google.maps.Size(15, 50)
});
function initialize() {
var loc = new google.maps.LatLng(-33.89, 151.26);
var locMarker = new google.maps.LatLng(-33.89, 151.23);
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: loc,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//This works FINE.. It sets the marker and infobox listener
var marker = new google.maps.Marker({
map: map,
position: locMarker,
visible: true
});
google.maps.event.addListener(marker, 'click', function() {
infobox.setContent('<div style="background-color:yellow">This is<br>an infobox.</div>');
infobox.open(map, this);
});
//Overlay from: http://humaan.com/custom-html-markers-google-maps/
var overlay = new CustomMarker(loc, map, {marker_id: '123'});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Part of Custom HTML Marker script:
google.maps.event.addDomListener(div, "click", function(event) {
infobox.setContent('<div style="background-color:yellow">Hi there</div>');
infobox.open(map, this); //*******THIS IS THE PROBLEM********
google.maps.event.trigger(self, "click");
});
My problem is infobox.open(map, this); is expecting a marker and I give it the "div". How can I adjust this function so that it accepts my div?
Full script: http://humaan.com/custom-html-markers-google-maps/
To use anything as an anchor for a marker, it needs to expose a latLng position property and an optional anchorPoint property.
from the documentation:
open(map?:Map|StreetViewPanorama, anchor?:MVCObject)
Return Value: None
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.
I wasn't carrying the correct loc(lat/lng) and map into the function call.
Here is the revised listener:
google.maps.event.addDomListener(div, "click", function(event) {
var map = self.getMap();
var loc = self.latlng;
infobox.setContent('<div style="background-color:yellow">Hi there</div>');
infobox.openRevised(map, this, loc);
google.maps.event.trigger(self, "click");
});
Here is the revised infobox.open() function:
InfoBox.prototype.openRevised = function (map, anchor, loc) {
if (anchor) {
this.position_ = loc;
}
this.setMap(map);
};

Google Maps API v3 - Add marker after initialize

My end-goal: Load only map markers within current map viewport and if map is moved, reload map markers within new viewport.
As far as I know, to do this I need the map corner coordinates which I can only load once the map is idle, that way I can pass these coords to my PHP file to query my database and output the XML for the map markers within the corners (I'm trying to reduce the stress on my DB by restricting the query to only the relevant map area). I'm having trouble adding a dummy marker post-initialize (see code below). It's simply not loading the marker, everything else works fine.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById("googleMap"), {
zoom: 12,
center: new google.maps.LatLng(40.779502, -73.967857)
});
google.maps.event.addListener(map, 'idle', function() {
/*bounds = map.getBounds();
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
window.top.showBounds();*/
TestMarker();
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
CentralPark = new google.maps.LatLng(40.779502, -73.967857);
addMarker(CentralPark);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You don't need to wait for the idle event. The map bounds are available the first time the 'bounds_changed' event fires.
Wait for the bounds_changed event; whenever the bounds changes (including the first time), then update your markers on the map.
working fiddle
code snippet:
var map;
var bounds;
function initialize() {
map = new google.maps.Map(document.getElementById("googleMap"), {
zoom: 12,
center: new google.maps.LatLng(40.779502, -73.967857)
});
google.maps.event.addListener(map, 'bounds_changed', function() {
bounds = map.getBounds();
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
document.getElementById('mapBounds').innerHTML = bounds.toUrlValue(6);
TestMarker();
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
CentralPark = new google.maps.LatLng(40.779502, -73.967857);
addMarker(CentralPark);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mapBounds"></div>
<div id="googleMap" style="border: 2px solid #3872ac;"></div>
Why don't you add another listener event inside your initialize function:
google.maps.event.addListener(map, 'dragend', function(){
var latlng = new google.maps.LatLng(35, -90);
var marker = new google.maps.Marker({
position: latlng
});
marker.setMap(map)
});
Google Maps Marker adding is very simple thing.I've created an example, for you.In this page there is some basic examples of google maps markers
http://www.w3docs.com/learn-javascript/google-maps-markers.html

Google Maps click event places marker but can't zoom on dlbclick event

I need people to be able to click on the map, place a marker, update the input fields, and still be able to dbl click to zoom in more even after the marker is set.
What I have now does everything besides allow a dblclick event to zoom.
var map;
var marker = null;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.639, -95.689),
zoom: 3
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
$("#latcoord").val(event.latLng.lat());
$("#longcoord").val(event.latLng.lng());
if (marker) { marker.setMap(null); }
marker = new google.maps.Marker({ position: event.latLng, map: map});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks!
set disableDoubleClickZoom to false
like this
map.set("disableDoubleClickZoom", false);

Google Maps API - InfoWindow not opening with custom marker icon

I've spent a few days trying to fix this to no avail. Any help would be appreciated.
I have a very simple Google map with one marker which when clicked zooms in and displays an infoWindow. My problem is that when I replaced the standard marker with a custom image marker, it zooms in but the infoWindow fails to appear. I've been using the Google API doco and a bit of cut & paste to get this.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-22.062160, 144.142205);
var mapOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'images/cccMap.png';
var myLatLng = new google.maps.LatLng(-22.062160, 144.142205);
var cccMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: 'Click to zoom to Orielton, Crown Cattle Company',
animation: google.maps.Animation.DROP
})
var infowindow = new google.maps.InfoWindow({
content:"<h1>Orielton</h1><p>Welcome to the center of Queensland.</p><p>View Photos or Videos</p>",
maxWidth: 200
});
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I'm sure it's something simple, but I could really use the help. Cheers.
You did it almost right. marker was undefined in click event listener:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
}
Change your event listener to:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(cccMarker.getPosition());
infowindow.open(map, cccMarker);
});
}
Here is the whole code at jsbin. Note: you will not see the pointer icon there because it is on my system and I do not know how to provide it. But you have the code to compare.
And here is the result from my system:
Your Code:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
You are attempting to assign a marker "cccMarker" as first parameter, but it is assigned (as properly attempted) in the line infowindow.open(map,marker); – remove your first parameter of addListener() and properly assign it as "cccMarker" (you wrote "marker") in infowindow's open().
It should look like:
google.maps.event.addListener('click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,cccMarker);
});
This way it should work properly.

Categories