I can't figure out how to make a draggable pushpin. I used this code that is similar to tutorial I can find everywhere:
<script type='text/javascript'>
function GetMap()
{
var loc = new Microsoft.Maps.Location(47.1, 2.20696);
var map = new Microsoft.Maps.Map('#myMap', {
credentials: 'XXXXXXXXXXXXX'
, center: loc,
zoom:16
});
var pin = new Microsoft.Maps.Pushpin(loc);
pin.setOptions( { draggable: true, text:'1' });
map.entities.push(pin);
}
</script>
<script type='text/javascript' src='//www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
<div id="myMap" class="bing"></div>
But it is not working.
What may be wrong?
Pushpins were not draggable in the initial release of V8, however this functionality has been added in the experimental branch of V8. Simply add "&branch=experimental" to the map script URL and your pushpin will be draggable. All new features and bug fixes that are currently in the experimental branch will be rolled into the main release branch at the end of the month.
Related
In V7 Bing map you have provided functionality of custmally add pushpin and infobox in clustering map on below link
https://www.bingmapsportal.com/isdk/ajaxv7#LoadingDynamicModule3
But in V8 bing map Microsoft didn't provided how can i set Pushpin and infobox in clustering map .
http://www.bing.com/api/maps/sdk/mapcontrol/isdk#clusteringMeanAverage+TS
Can you please provide sample code for pushpin and info box in clustering map ?
Thanks in advance
Here is an example of how to store data with a pushpin using the metadata property and add a click event to the pushpin that opens an infobox:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer></script>
<script type='text/javascript'>
var map, infobox;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Your Bing Maps Key'
});
//Create an infobox at the center of the map but don't show it.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
visible: false
});
//Assign the infobox to a map instance.
infobox.setMap(map);
//Create a pushpin in the at a random location in the map bounds.
var randomLocation = Microsoft.Maps.TestDataGenerator.getLocations(1, map.getBounds());
var pin = new Microsoft.Maps.Pushpin(randomLocation);
//Store some metadata with the pushpin.
pin.metadata = {
title: 'Pin Title',
description: 'Pin discription'
};
//Add an click event handler to the pushpin.
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
//Add pushpin to the map.
map.entities.push(pin);
}
function pushpinClicked(e) {
//Make sure the infobox has metadata to display.
if (e.target.metadata) {
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
location: e.target.getLocation(),
title: e.target.metadata.title,
description: e.target.metadata.description,
visible: true
});
}
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
For individual pushpins you can customize them before you add them to the clustering layer and the clustering layer will simply render them. No need for a callback like in the old v7 module. A callback is still used when customizing clustered pushpins.
For infoboxes simply add a click event to the pushpins and clusters and when the event fires you can load an infobox. This is really simply. Also, you only need one infobox in an app and simply update it's content based on what has been clicked.
Full documentation can also be found here: https://msdn.microsoft.com/en-us/library/mt712542.aspx
I've followed a tutorial to create a Website Menu, this involves JQuery to provide some transitions.
I've got it working as intended, but to prove I understand this new code and framework, and also, to follow development guidelines, I want to move to the Menu code to a plug-in.
Working (not-plug-in) version:
This appears in the .ascx, along with a UL tag, ID = MainMenu
<script type="text/javascript">
NavBarMenu();
</script>
In another file, NavBar.js, the following code is used to associate some JQuery events:
function NavBarMenu() {
$(function() {
var $menu = $('#MainMenu');
var $menu_items = $menu.children('li');
...
Not working version:
Now the plug-in code is created, the NavBarMenu function is called like this from the .ascx:
<script type="text/javascript">
$("#MainMenu").NavBarMenu();
</script>
In NavBar.js I now have:
(function($) {
$.fn.NavBarMenu = function() {
var $menu_items = this.children('li');
However, the $menu_items variable is unpopulated?
Shouldn't this (2nd example) be equivalent to $('#MainMenu') (1st example)
I followed this example, where a JQuery selector is switched for the this pointer. http://learn.jquery.com/plugins/basic-plugin-creation/
Thanks in advance :D
There must be other factor affecting my implementation, I will revisit it.
I have created 2 JSFiddle pages, as part of my investigation and it has proved that the JQuery Selector can be swapped for the this pointer in a plug-in.
Fiddle detailing 1st example: http://jsfiddle.net/rL7zpr15/1/
$('input[type=button]').click( function() {
$( "div" ).css( "background", "green" );
});
Is equivalent to
Fiddle detailing 2nd example: http://jsfiddle.net/hds7advx/
$.fn.greenify = function() {
this.css( "background", "green" );
};
$('input[type=button]').click( function() {
$( "div" ).greenify();
});
creating a mobile website using PinchZoom.js plugin to zoom in and zoom out on a map. It also has a search feature that highlights areas on the map.
When the map is zoomed in, and someone searches, I want pinchzoom.js to reset back to the zoomed out view. I can achieve this by removing the style on the Zoom Container through jquery. but when I tap back on the map, it starts zooming from the original zoomed in location, before the search.
How would I go about resetting the pinchzoom.js plugin back to its original onload scale from a jQuery click function?
<script type="text/javascript">
jQuery(function ($) {
$(function reset() {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {
maxZoom: 10
});
});
})
});
</script>
<script>
jQuery(function ($) {
$(document).ready(function() {
$('#contactlink').click(function(){
$('#formbox').slideToggle('fast');
$('.pinch-zoom .activeLocation').removeClass('activeLocation');
});
});
$(document).ready(function() {
$('#formbox').click(function(){
$('#formbox').slideToggle('fast');
});
});
})
</script>
<script type="text/javascript">
jQuery(document).ready(function (){
jQuery('#E1').click(function() {
jQuery('.pinch-zoom').empty();
jQuery('.E1').addClass("activeLocation");
});
});
</script>
In my case I need to reset zoom image.So save old image src of zoom image in one variable and create new html element i.e. image with same id and set old image src which we saved in temporary variable.With orientation change we can use same solution.
In your case save your value of zoom element and delete it and recreate html element and assign old value.
May be it is not proper solution.But it works for me.
I want to edit my country map so I first added Geoserver but I can't edit this map. I want to show openlayers using Geojson but for some reason I can't edit this either.
How i can edit this map? The following is my code with geoserver link:
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.zoomToMaxExtent();
new OpenLayers.Map("map");
var dm_wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://localhost:8080/geoserver/wms?",
{
layers: "trgm:iller",
format: "image/png"
},
{
isBaseLayer: false
}
);
map.addLayers([wms, dm_wms]);
map.zoomToMaxExtent();
</script>
To edit map data in geoserver, you need to use WFS Service.
Then using OpenLayers, you can set the layer editable.
see OpenLayers example
I'm trying to load a map as per the example in the Google documentation, but it's not loading. I tried using resize, but it's not loading correctly. This map is behind a tab rendered with the Prototype JavaScript Framework which magento uses. It loads correctly when not behind a tab.
<style type="text/css">
#map_container { height:500px; width:700px;margin:0;}
</style>
<div id="map_container">
<div id="map_canvas" style="width:500px;height:500px;"></div>
</div>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true">
</script>
<script type="text/javascript">
Event.observe( window, "load", function() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
;
google.maps.event.trigger(map, "resize");
});
</script>
The map is shown with grey parts that cover most of the map and the UI elements are not fully initialized. I tried using google.maps.event.trigger(map, "resize");, but it does not seem to do anything. This div is inside a lot of divs.
Example how to add new tab "GMaps" in Magento "Product Edit" (new tab "id" is 'product_info_tabs_GMaps')
PHP part
class My_Gmaps_Block_Adminhtml_Tabs_Gmaps extends Mage_Adminhtml_Block_Widget_Form
public function __construct() {
parent::__construct();
$this->setTemplate('my/gmaps/tabs/gmaps.phtml');
}
/............................./
}
Template part 'pwron/gmaps/tabs/gmaps.phtml':
<style>#map_canvas {width:100%; height:600px;}</style>
<div class="map" id="map_canvas"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var GMaps = Class.create();
GMaps.prototype = { .................... }
var gmaps = null;
function switchGMapsTab(tab){
if ( tab.tab.container.activeTab.id == 'product_info_tabs_GMaps'){
if (!gmaps){
gmaps = new GMaps({});
gmaps.update();
}
}
}
varienGlobalEvents.attachEventHandler('showTab', switchGMapsTab); <script>
trouble way
1. Created Map
2. Tab showed (not loads all tiles)
best way
1. Tab showed
2. Created Map
I had the same problem as you. But I managed to find the solution with this simple code.
First, go to the file where you put the tab template, search for the <li> tag that load your map tab and put this inside:
<li onclick="reloadmap()">
And in the map script right after the
google.maps.event.addDomListener(window, 'load', initialize);
put this:
function reloadmap(){
//when you resize the map, you lose your zoom and your center
//so you need to get them again here
z = map.getZoom();
c = map.getCenter();
google.maps.event.trigger(map, 'resize');
//and set them again here
map.setZoom(z);
map.setCenter(c);
}