This question already has an answer here:
Google Maps Api V3 - Styling countries or cities
(1 answer)
Closed 5 years ago.
I want to show in my website only certain places using GoogleMap.It shouldn't show any small places.Only major places should be visilble in map.What is procedure to obtain this?
Set your lat/lon to the location of a post office (or other city indicator).
Then, use the zoom property to fix to the level you want to encompass.
See: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here is the code form the example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Try that script at map.zoom = 16. Should be close to city view. London I think.
You can also set map bounds, but that is a lot harder. You would need to find your location, then plot geometry around that area, define the points, and then, zoom all points into view.
All of this is possible, but you showed me no code, so I'm not showing any back.
Hope you found something useful,
Related
Hi all i have task to create monitoring of 200 ip addresses and for each of this ip we have location latitude/longitude. Now for the monitoring purpose i have perl script runing which pings all 200hosts and update their status in MySql database.
Now i want to display these 200 locations on google maps and change marker color depending on status Green = online, Red = offline.
Also i have loaded kml fille with location of the connections and street cabling ( This is fixed and no changes are needed )
How can i generate markers dynamically and display them all together with already loaded kml fille?
Or if there is any other solution i am willing to consider it.
Here is a sample where i am loading my kml fille:
<!DOCTYPE html>
<html>
<head>
<title>KML Layers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=MY API&callback=initMap&libraries=&v=weekly"
defer
></script>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
"use strict";
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: {
lat: 35.928926,
lng: 14.462688
}
});
const ctaLayer = new google.maps.KmlLayer({
url: "MY KML ADDRESS",
map: map
});
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I ended up using
MySql to Maps
I have a KMZ file that i load into my google maps application via link using javascript. The file works perfectly in Google Earth. The problem is in my application when i click in one of the many elements (areas): the returned description data is always from only one of the elements, not displaying the actual clicked, correct, element. This is what i've tried:
Check if the click event in the map is correct by placing a marker in the clicked position, it is correct.
Convert the data into KML using Google Earth, place it into my google drive as public, and using a direct download link from google drive in my application. It displayed the data but the error continued.
Created the most basic/blank application using just the layer to make sure anything else in my other application is interfering. Also didn't work.
The file is in this website: https://www.voanaboa.pt/codigo-drone named as "Regulamento RPA_ver_5.0.kmz”
Here's the only file that creates a basic application using the kmz file, i've removed my API key for privacy.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var kmlLayer = new google.maps.KmlLayer();
var src = 'https://www.voanaboa.pt/Files/downloads/Regulamento-RPA-ver-5.0.kmz';
var kmlLayer = new google.maps.KmlLayer(src, {
//suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=geometry&callback=initMap"
async defer></script>
Most (but not all) of your placemarks have the same ID "ID_00000"). If I change that to be unique, the polygon's descriptions become unique:
example with unique ids
Per the KML reference, that doesn't have to be unique (it is a "stanard XML ID", but I am guessing the rendering code is assuming it is.
code snippet with updated kmz file:
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var kmlLayer = new google.maps.KmlLayer();
var src = 'http://www.geocodezip.com/geoxml3_test/kmz/Regulamento-RPA-ver-5.0a.kmz';
var kmlLayer = new google.maps.KmlLayer(src, {
//suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>
I have a google map api page that does not return the correct coordinates from the mouse event in firefox when the map div is not at the top left (0,0) of the browser window. If I put any css padding or margin on the map div, the mouseevent origin in google maps still starts from the top left of the browser window and not the map div. The mouseevent works correctly in IE & Chrome returning the correct lat/lng but not Firefox. Anyone have any suggestions to correct?
I created a very simple example at http://jsfiddle.net/fNPvf/15426/ that shows the coordinates as the mouse is moved over the map. You can see at the top left of the map image, the coordinates should be 0,0 but Firefox showing 50,50. The infowindow shows the correct lat/lng of the map center and you can see the difference in coordinates (50 pixel shift to top left) when you move the mouse to that point.
<html>
<head>
<meta charset="utf-8">
<style>
body {font:12px arial; margin:0px}
#map {
height:400px;
width:400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
coord = new google.maps.LatLng(38.939201, -94.747640)
function initialize() {
var mapOptions = {
zoom: 16,
center: coord
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.trigger(map, 'resize');
var coordInfoWindow = new google.maps.InfoWindow();
coordInfoWindow.setContent('38.939201, -94.747640');
coordInfoWindow.setPosition(coord);
coordInfoWindow.open(map);
google.maps.event.addListener(map, "mousemove", function (event) {
document.getElementById("footer").innerHTML = "Mouse X Y:" + event.pixel.toString() + " - Lat Lng:" + event.latLng.toString() + "<br />"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="margin-left:50px;margin-top:50px;"></div>
<div id="footer" style="margin-left:50px; padding:10px;"></div>
</body>
</html>
Solution:
Add parameter v=3 once calling the google maps api. The fiddle provided by user4974882 is calling 3.exp - doesn't work.
Works:
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
Live example
Doesn't work correctly:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
Live example
(both fiddles from user4974882)
Background:
The problem occured with Firefox Version 39. The Mozilla-team implemented some new functionality regarding offsetX/Y (https bugzilla.mozilla.org/show_bug.cgi?id=69787). Unfortunately the Google Maps API already somehow plays around with that (https code.google.com/p/gmaps-api-issues/issues/detail?id=8278) and so - once FF39 was rolled out - the problem popped up.
Problem with latest release of FF v39. Worked previously in v38.0.5.
I can confirm that the following is bugged, given a map with a fixed size and a 64px margin, "Hello World!" will only appear when you place the mouse pointer at -64,-64 relative to the marker. It appears that inside Maps, the pointer position is offset by the x/y of the map element relative to the top left corner of Firefox' client area
This issue has appeared in the last few days
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
#map-canvas
{
width: 640px;
height: 480px;
margin: 64px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
When creating a marker use the option {optimized:false}. It solves the issue in firefox 39.0.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
#map-canvas
{
width: 640px;
height: 480px;
margin: 64px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
optimized: false
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
As stated - this bug crept in with FF 39.
In your example, replace the v=3.exp parameter with just v=3
So it would be
src="https://maps.googleapis.com/maps/api/js?v=3"
I want to show location in Google map using JavaScript, but when I zoom out, it shows multiple maps! Also, the map is not fixed in the browser window.
How can I fixate it to the window and force it to show just one map?
<!DOCTYPE html>
<html>
<head>
<title>My Location:</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=en'></script>
<script type='text/javascript'>
var map;
function loadMap(lat,lng) {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.ROAD ,
//scrollwheel: false,
//disableDoubleClickZoom: true,
minZoom: 1
};
map = new google.maps.Map(document.getElementById('my_location'), myOptions);
map.streetViewControl=true;
//window.onresize = google.maps.event.trigger(map, 'resize');
}
window.addEventListener('resize', function(){
google.maps.event.trigger(map,'resize');
});
</script>
</head>
<body onload='loadMap(46.518465, 6.5,45,7)'>
<div class='fd'>
<div class='cd'>
<div id='my_location' class='shadow' style='width:600px;height:260px;'></div>
</div>
</div>
</body>
</html>
Edit :
I have uploaded my page screen shot here :
one : is when my page is loaded.
two : is when I zoom out and resize the window.
three : is when I move map to scroll it.
as you see, in two I have three map ! and in three map didn't fix to its div!
Edit2:
I upload my code!
Your question is not really clear. Could you please provide further explanation of the issue?
Resizing the map on div change
From API reference:
Developers should trigger this event on the map when the div changes
size: google.maps.event.trigger(map, 'resize') .
All you have to do is trigger this event when your window resizes e.g. window.onresize
Adding listener
window.addEventListener('resize', function(){
google.maps.event.trigger(map,'resize');
});
Displaying the map div
Put this in the <head> of your document.
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#my_location{ height: 100% }
</style>
From what I can tell, you are concerned that at the highest zoom levels three copies of the map are shown? This is standard to Google Maps and basically all webmaps. If you don't want that, you could investigate making a custom map with Kartograph.
If you are trying to stop zooming, change to the following code:
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.ROAD ,
scrollwheel: false,
disableDoubleClickZoom: true,
minZoom: 1
};
Other than that, I'm not sure what you are asking.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to highlight a user's current location in google maps?
Is there any method to get blue circle marker in current location using javascript google maps api?
You can use the GeolocationMarker library. It is part of the Google Maps API Utility Library.
Use the navigator.geolocation approach, and use a custom icon for your blue circle
https://developer.mozilla.org/en-US/docs/Using_geolocation
https://developers.google.com/maps/documentation/javascript/overlays#Icons
EDIT:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps User Location</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
html, body, #map_canvas{width:100%;height:100%;}
</style>
</head>
<body onload="locate()">
<div id="map_canvas"></div>
</body>
<script>
var im = 'http://www.robotwoods.com/dev/misc/bluecircle.png';
function locate(){
navigator.geolocation.getCurrentPosition(initialize,fail);
}
function initialize(position) {
var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var userMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: im
});
}
function fail(){
alert('navigator.geolocation failed, may not be supported');
}
</script>
</html>