Im trying to embed a map sing google maps api v3 in my nyromodal box but it doesnt happen.
I've tested the code without the modal and it works but when i try to open it on the nyromodal nothing appears.
How can i do it?
Ive just figured out how to do it!
1 - Insert the js code for google in your index page with 'rel="forceload"' and 'rev="shown"' as the following:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false" rel="forceload" rev="shown"></script>
2 - You insert the code that generates the map inside the modal page as the following:
<script>
$(document).ready({
var mylatlng = new google.maps.LatLng(latitude, longitude);
var mapProp = {
center: mylatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("briefmap"), mapProp);
var marker = new google.maps.Marker({
position: mylatlng
});
});
</script>
Related
I just wondered if anyone knew of a simple script available that will do the following:
Show Google map location of a particular vendor by getting its name from URL. Like we see in various listing websites like Justdial, IndiaMart, Zomato and a lot more. More clearly if my URL is
www.example.com/list.php?city=Delhi
It will show Delhi on google map embed on my list.php web page.
Does anyone know if something like this already exists in PHP?
Thanks in advance.
This will help you.
Html Part.
<div id="map" style="width:100%; height:500px;"></div>
Javascript:
function initMap() {
var latitude = your latitude;
var longitude = Your longitude;
var myLatlng = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
});
var address = Address;
var infowindow = new google.maps.InfoWindow({
content: address
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
}
And finally you have to include map library.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=Google key&callback=initMap">
</script>
I have a code of generate map image using Google map api display below :
<img src="https://maps.googleapis.com/maps/api/staticmap?center='<?php echo $madd; ?>'&zoom=7&size=700x300&markers=icon:http://chart.apis.google.com/chart?chst=d_map_pin_icon%26chld=medical%7Clabel:'<?php echo $mlabel; ?>'"/>
Using above code display here google red marker icon but I want to display custom marker icon.
Please help me.
You can try this one i think this one being helpful to you
http://maps.google.com/maps/api/staticmap?center=21.19365498864821,72.8217601776123&size=200x200&zoom=12&maptype=roadmap&markers=icon:%20http://ijiya.com/images/marker-images/image.png|shadow:true|21.19365498864821,72.8217601776123&sensor=false&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC365hfg5yrjskd999
You can simply achieve it using java-script
var image = '../images/pin.png';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'YOUR MARKER TITLE',
icon:image
});
where image is your custom marker PNG image,
So your Java-Script code should look like this
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center: new google.maps.LatLng(30.085100, 31.328230),
zoom: 16,
disableDefaultUI: true,
mapTypeId: 'Styled'
};
var div = document.getElementById('surabaya');
var map = new google.maps.Map(div, options);
var myLatLng = { lat: 30.085100, lng: 31.328230 };
var image = '../structure/static/pin.png';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'PMAS',
icon:image
});
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
};
You can simply use this PHP script. It is free and has lots of features. With it, you can manage your maps without even one line coding.
I have codeigniter project which header, footer loading when calling the controller. So after header is loaded I want to add a google map to get latitude and longitude to textboxes when map been clicked. Currently I can do this outside of codeigniter. But I can't do this inside of CI after header loaded. I think its because google use window load function to initialize map.
<head>
<!-- Some js files loaded here when controller construct -->
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(40.713956,-74.006653);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: map,
title: "Your location"
});
google.maps.event.addListener(map,'click',function(event) {
document.getElementById("latbox").value = event.latLng.lat();
document.getElementById("lngbox").value = event.latLng.lng();
})
google.maps.event.addListener(marker, 'click', function (event) {
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas" style="width:50%; height:50%"></div>
If You're using jQuery, try something like
$(document).ready(function(){
// here paste google maps code
});
Map will initialize when DOM is ready
I have a php application that stores Lng-Lat Coordinates to my database.
I would like to show all these places to a google map.
Edit: I have 6000 coordinates, I would like to do this in some way automatically.
Thank you
There are articles for that, which you can find nice and easily on Google
https://developers.google.com/maps/articles/phpsqlajax_v3
If you have several locations, you can use the following code:
var coords = [
[40.980542, 55.111786],
[42.329036, 55.222452],
[44.280249, 54.333]
];
function initialize() {
var myLatlng = new google.maps.LatLng(coords[0][0], coords[0][1]);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i = 0; i < coords.length; i++) {
var latlng = new google.maps.LatLng(coords[i][0], coords[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "marker : " + (i + 1)
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Check out a working example in JSfiddle.
Also, take a look at Google Places API.
Its a service that returns information about Places using HTTP requests
I was wondering if anyone has any ideas/tutorials on how to plot various points on a google map, and save the points in a database with custom marker titles.
I want something similar to http://www.mapmyrun.com/create_new , where i can actually draw on a map and mark out paths and such.
Plotting the points is done in Javascript, I managed to learn everything I needed from the maps API docs:
http://code.google.com/apis/maps/documentation/javascript/basics.html
I scraped the code below off a site I made which moves a single point to where the mouse is clicked. You should be able to store a set of points in a JS array, or better, get them from the map when submitting your form then update a hidden form field with the values which can be inserted in your database with a php/python script on the server.
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:600px; display:block; float:left">
</div>
</body>
</html>
<script type="text/javascript">
var map;
var marker = null;
function initialize() {
var myLatlng = new google.maps.LatLng(54, -2.0);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
if(marker == null){
marker = new google.maps.Marker({
position: location,
map: map
});
}else{
marker.setPosition(location);
}
map.setCenter(location);
}
</script>
Edit:
Here is a demo from docs site, which creates a list of points and draws a lines between them:
http://code.google.com/apis/maps/documentation/javascript/examples/polyline-simple.html
There are other examples there too. Just load them and press ctrl+u in firefox to view the source.