I want to create a map in mobile app and then user has the ability to mark boundry i.e polygon on it. So is it possible to make like that aor is there any library available
Here is an example in which user create polygon on click event how can i manage it in mobile app
Here is a demo in a jQM page: http://jsfiddle.net/ezanker/8TK6a/1/
Inside the standard page layout is a div for the map: <div id="map"></div> with this CSS;
#map{
width: 100%;
height: 300px;
border: 2px solid black;
}
Then in code:
var map;
var elevator;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(36.231719,-113.030911),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], myOptions);
var dm = new google.maps.drawing.DrawingManager({map: map, polygonOptions: {editable:true,fillColor:'#777777',strokeColor:'#595959',strokeWeight:2}});
UPDATE: added polygonOptions editable:true so you can see dots at each vertex.
Related
This is the first time I've used a google api and I followed the instructions exactly but the map won't load just the grey box that I started with, please help.
<div class="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function apimap() {
var uluru = {lat: -73.993439, lng: 40.750545};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
It seems there's an issue regarding your implementation. You are using apimap() as your init function while in your load request's callback, you are using initMap(). You should replace initMap() with apimap() or vice-versa. With this, your map will work.
I've replicated your issue, the location is in Antartica. You can check the demo below.
var map;
function apimap() {
var uluru = {lat: -73.993439, lng: 40.750545};
map = new google.maps.Map(document.getElementById('map'), {
center: uluru,
zoom: 4
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
/* 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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=apimap"
async defer></script>
And also, please refrain from posting your Google Maps API key unless it is restricted to prevent abuse and to avoid your API key being used by unauthorized applications. To learn more about API restrictions, you can check Restricting an API key.
Hope it could help and good luck on your coding!
I'm using Squarespace to build my website and want to insert a custom map from google maps javascript api. I've already gotten google api key.
I've followed steps as below :
What I'm trying to archive is just to show a google map on my web.
Step 1: Insert a embed block for html
<div id="map_canvas"></div>
Step 2: insert javascript in page header
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section
#map_canvas
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px
}
But the codes I put on Squarespace didn't work. How should I do?
Here the link to my webpage on SquareSpace
Your Site Title
Thanks!!
LoL, u put the script at a very wrong place i think.
1st. put your script, all of it after </body>
2nd. you need a cover for your maps <div> like a wrapper or so to put it in center. and using a cover/wrapper div you can manipulate the size and the shape.
3rd. i don't know id="maps_canvas". because from google i got this <div id='gmap_canvas' style='height:100%;width:100%; position:static'>, it was gmap_canvas. and put style in it to make them fit with your cover/wrapper div.
easier way: http://embedgooglemaps.com/en/
perhaps it'll help. :)
This is what I changed in my code as below :
Step 1: Insert a code block for html <-- it was not embed block, but code block. I mistyped before.
<div id="mapWrapper">
<div id='gmap_canvas' style='height:100%;width:100%; position:static'>
</div>
</div>
Step 2: insert javascript in page header.
I change only ID name from 'map_canvas' to 'gmap_canvas'
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section.
Changed ID name from 'map_canvas' to 'mapWrapper', then set another size.
#mapWrapper
{
width: 750px;
height: 500px;
margin: 0px;
padding: 0px
}
I tried to put most of everything people advised me, but still the map doesn't come up on my site.
Is there something wrong yet?
I did the same thing with my site.
What I did differently is not put my #map-canvas within a wrapper. While previewing your site, are you able to find your gmap_canvas with the inspect view? It may be that the content is there, just not displaying properly.
My code:
The following is in the page header code injection box. Note that a large bit of this code (and I don't remember which parts since I don't know JS) is just to keep the pin centered on different screen sizes.
<style type="text/css">
html, body, #map-canvas {
height: 400px;
width 960px;
margin: 0;
padding: 0;}
#banner-area-wrapper {
display: none;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap">
</script>
<script type="text/javascript">
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map-canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}
function initialize() {
var myLatLng = {lat: 39.910073, lng: -82.965509};
var mapOptions = {
center: myLatLng,
zoom: 14,
panControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT_CENTER},
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Opportunity Center'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
On the page, I have a code block, with the following in it:
<div id="map-canvas" style="width:90%;margin:auto;"></div>
Note that I did not put my #map-canvas inside a wrapper, nor include anything in the custom CSS.
I made a quick dummy site, and replicated your failure to show the map, but I don't know quite enough about Squarespace to say exactly why. I'd start with copying my code and see if that works for you - seems like the big difference is your wrapper around the canvas.
Need to implement a simple draggable map (no zoom), the pin should stay static in the centre, overlaying the map. Every time the map is moved/dragged under the static pin the positioning details of the pin are updated and I can grab those positioning details and display the address in input field above.
Probably a very simple task, I just don't have any experience with Google maps and it would be great if someone could point me either to a working example of this or to right API's/Libraries that I can use in my HTML5/Angular app. Would save me a lot of time researching. Thanks..
You can re-center the marker in a dragend event, and grab the new lat/long. If you want to convert the lat/long to a real world address, you can pass them to a reverse geocoder.
var newlat, newlong;
var latitude = 51.5;
var longitude = -0.12;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 8,
center: coords,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("mapContainer"), mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map,
draggable: true,
});
google.maps.event.addListener(map, 'dragend',
function() {
marker.setPosition(map.getCenter());
newlat = marker.getPosition().lat();
newlong = marker.getPosition().lng();
$('#coords').html(newlat + ', ' + newlong);
})
#mapContainer {
width: 400px;
height: 200px;
border: 1px solid #ebebeb;
}
#coords {
width: 380px;
padding: 10px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<div id="mapContainer"></div>
<br>
<div id="coords"></div>
Hello I am working on this example (example above)
and if I add a new map to this code, it will work, but only on this same page, if I add a map to the new page, then it crashes (map doesn't appear on the new page, it only works on the first page.
How can I achieve this?
To edit your jsfiddle, do the following:
Add to the html:
<div id="map_canvas_3" style="top: 10px; left: 125px; width:210px; height:220px"></div>
Add to the javascript:
var latlng3 = new google.maps.LatLng(29.579943,78.330006);
var myOptions3 =
{
zoom: 15,
center: latlng3,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map3 = new google.maps.Map(document.getElementById("map_canvas_3"), myOptions3);
var myMarker3 = new google.maps.Marker(
{
position: latlng3,
map: map3,
title:"TEST"
});
Should work fine.
Fiddle: http://jsfiddle.net/56HMR/2/
I have two tabs in my jQuery application. I want to use Google Maps in both the tabs. I added script and two <div> tags for each tab shown in code below.
First Tab:
<div class="map_canvas" style="width:100%; height:100%"></div>
Second Tab:
<div class="map_canvas" style="width:100%; height:100%"></div>
Script for Google Maps:
function initialize()
{
var latlng = new google.maps.LatLng(11.6952727, 77.5195312);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementByClassName("map_canvas"),myOptions);
}
----------Style for Google Map
.map_canvas { height: 100% }
#notes{ height: 100%;width:100% ; margin: 0px; padding: 0px } // Tab1 div tag ,contains the First tab map Div Tag
#accordionWrapper{ height: 100%;width:100% ; margin: 0px; padding: 0px }// Tab2 div tag, contains the First tab map Div Tag
The map is not displaying in the two tabs. What is the problem here?
As you can see here getElementByClassName() returns a live NodeList of found elements in the order they appear in the tree: you should iterate over that nodeList and create a new map for each element because i don't think gmaps API allows you to do that.
You will want to iterate the elements with the map_canvas class and create a new Map instance for each one of them, otherwise it will not work.
And I guess you are using jQuery UI Tabs for this? If so, you'll most likely run into trouble when loading Google Maps into hidden/inactive tabs. As mentioned in the comments there already exist questions about this with accompanied answers that solves this problem.
Anyhow, do the following changes/additions to your code and you should be good to go!
CSS
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
JavaScript
$(function() {
// Container for maps
var maps = [],
// Initial position
latlng = new google.maps.LatLng(11.6952727, 77.5195312),
// Options for Google Maps
mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Iterate the canvas elements and create a new map instance
$(".map_canvas").each(function(){
maps.push(new google.maps.Map(this, mapOptions));
});
// Trigger map resize on tab change
$('#id-of-tabs-container').bind('tabsshow', function(event, ui) {
google.maps.events.trigger(maps[ui.index], 'resize');
});
});
Replace the temporary ids to the corresponding ids of your elements.