I want to draw a custom rectangle which is resizable and draggable with a close button and
which is formed with the bounds returned by the query in the database.
Thanks
This is a rectangle resizable and dragabble. A little search and some trying would give you what you need.
function initialize() {
var myOptions = {
center: new google.maps.LatLng(44.5452, -78.5389),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(44.490, -78.649),
new google.maps.LatLng(44.599, -78.443)
);
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true
});
rectangle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Hope this helps!
I think the only thing you need to add is "draggable: true" in rectangle options.
So, it should be something like this;
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
This will make the rectangle resizable and draggable. Also in the body of the page create one button.
<body >
<button onclick="remove()">Close</button>
</body>
Inside remove function you can write your code to connect to database. You will have to declare the bounds outside initialize() to access it. This link might help you to understand how to connect google maps and MySQL. https://developers.google.com/maps/articles/phpsqlajax_v3
Related
I am having difficulties trying to add an image as a ground overlay to a google map that I am creating. In all of the help files that I have seen, the image has been passed to the ground overlay function as a url. Is it possible to have an image that is stored on my machine passed in, rather than an online image?
Here's the code I have for the map & overlay:
function initialize() {
var mapOptions = {
center: {lat: 45.3469, lng: -75.7594},
zoom: 10,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(45.2118075, -75.4455767),
new google.maps.LatLng(45.2043559, -75.4545309));
var campusOverlay = new google.maps.GroundOverlay('Campus.JPG', imageBounds);
campusOverlay.setMap(map);
}
I am looking to add the 'Campus.jpg' image that I created to the map. I have also tried passing in the entire path with all its directories and still nothing appears on the map. If there is no way of passing an image like this, is there a way to put the image online and use it that way?
Thanks
Pass in a full url to the image as the first parameter for GroundOverlay and make sure that your bounds are correct. This can be kind of tricky. Your overlay should cover a northern lat and southern lat/east and
west longitude, so you essentially have some sort of rectangular area.
Here is a quick example. Sure you will get the idea.
var overlay;
function initialize() {
var center = new google.maps.LatLng(45.3469, -75.7594);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(45.2, -76.1),
new google.maps.LatLng(45.5, -75.38)
);
var mapOptions = {
zoom: 10,
center: center,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
overlay = new google.maps.GroundOverlay(
'https://upload.wikimedia.org/wikipedia/commons/e/ee/Dowarian%2C_Neelam_Valley%2C_AJK_Pakistan.JPG',
imageBounds);
overlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>
Hope that helps.
I am totally lost, my marker won't show on the map. I did the exactly as shown on the Google Maps example. I can't get the marker to appear on mylatlng. The icon image is in the same folder as the html page.
$("#b1").on("click",function(){
function initialize(){
var myLatLng = new google.maps.LatLng(40.7404, -74.1789);
var mapOptions = {
zoom:5,
center: myLatLng
}
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var image = 'marker.png';
var myLatLng = new google.maps.LatLng(40.64043,-74.2789);
var Name = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image
});
marker.setMap(map);
});
google.maps.event.addDomListener(window, 'load', initialise);
UPDATE:
FIGURED IT OUT. I need to have google.maps.event.addDomListener(window, 'load', initialise); outside the function.
UPDATE 2:
well i don't need to have the 'initialize' within google.maps.event.addDomListener(window, 'load', initialise); if i do that. it would create only one marker. After deleting the it, marker is working for all the 30 onClick list that i have. And yeah i don't need the function initialize()
Couple of mistakes here ,
1:You were using wrong marker variable to set Map,initialize marker as global variable.
2:To get map display you have to use Google map Dom Events google.maps.event.addDomListener(document.getElementById('yourbuttonid'), 'click', initialize);
3:And it will be out of the intialise function.
Demo
Does anyone know how i would move the pan/zoom control position of google maps whilst inside streetview?
I can position the controls to the right side on normal map view, but when streetview is activated the pan control and the zoom buttons switch over to the left hand side?
How would i go about telling these to position to the right whilst streetview is active?
Thanks!
I've tested the following code and it worked for me
map.get('streetView').setOptions({
panControlOptions: map.get('panControlOptions'),
zoomControlOptions: map.get('zoomControlOptions')});
the streetView has it's own control-options which will not be inherited from the map.
You must explicitly set these control-options for the streetView:
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.345573,-71.098326),
zoom: 14,
panControlOptions:{
position:google.maps.ControlPosition.RIGHT_TOP
},
zoomControlOptions:{
position:google.maps.ControlPosition.RIGHT_TOP
}
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
//apply the map-settings for panControl and zoomControl to the streetView:
map.get('streetView')
.setOptions({panControlOptions: map.get('panControlOptions'),
zoomControlOptions: map.get('zoomControlOptions')});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 400px; height: 500px"></div>
Not sure if this is possible but I have set my map up with custom styles and marker and I want to ensure the map shows at this level but with London in view. To do so I centred the map at a different location to my marker. I would like the map to zoom to my location if possible instead of the centre.
var myLatlng = new google.maps.LatLng('51.4525368','0.2481994');
var mapOptions = {
center: new google.maps.LatLng('51.4600368','0.0781994'),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 11,
mapTypeControl: false,
scrollwheel:false
};
Also if anybody can tell me why my info window is displaying all funky I would appreciate too.
It has been tough to understand your question but if I got you right, you are trying to fit both center of London and your location on the map without setting a center on some position on the map. If that's correct, then you need google.maps.LatLngBounds() to get it done.
var bounds= new google.maps.LatLngBounds();
var London= new google.maps.LatLng(//London values);
var myLatLng = new google.maps.LatLng(//your values);
bounds.extend(London);
bounds.extend(myLatLng);
map.fitBounds(bounds);
Check if this serves your purpose.
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);